Adding animation to text and pictures?

  • Unknown's avatar
    djjoesimpson1 · Member ·

    Is there anyway that I can get the pictures on my home page to fade in on scroll and also I want to change some of the text to more bullet point format, but would like the headers to bounce in.

    I’ve seen it can be accomplished with plugins on .org but cant for the life of me find if any animations of any kind can be achieved on wordpress.com

    When compared to my competition in my local area, i’m lacking the eye catching elements on my website that my competitors have and its surprising just how many customers go elsewhere because the text bounces on the other persons website.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Most scroll effects are triggered with javascript which isn’t something you can customise with WordPress.com. However you can apply CSS animations for certain elements when they’re hovered over with a mouse on desktop browsers.

    What elements do you want to change, what sort of effects are you trying to apply and can you link to some sites that demonstrate this for reference?

  • Unknown's avatar
    djjoesimpson1 · Member ·

    I’ve already got it so that images have a white overlay when the mouse hovers over them.

    But i’m hoping to achieve something like the following http://www.djashleyriggs.co.uk/ which is one of my main competitors website.

    Not so much on the parallax effects as i know i’l probably have to change theme for that. But the eye catching animations i think give them the edge when it comes to a professional yet fun presentation.

    Thanks for your assistance

  • Unknown's avatar
    hallluke · Member ·

    I can’t think of a way to achieve any of those effects as they’re triggered by javascript when the page is scrolled – something that we can’t do.

    However we can still add in some animations, the following code will animate the quote button to appear from the side of the screen when the page first loads (although if it appears below the bottom edge of the screen on a smaller device visitors won’t see it happen). It will also rotate the button when it’s hovered over.

    Go to the CSS page of your customiser and copy this in:

    .hero-wrapper {
	overflow: hidden;
}
.hero-content p:nth-child(4) {
	position: relative;
	left: 0;
	animation: appear 2s ease;
}
@keyframes appear {
	0% {left:200%}
	100% {left:0}
}
.hero-content p:nth-child(4) a {
	transition: transform 0.5s ease-in-out;
}
.hero-content p:nth-child(4) a:hover {
	transform: rotate(-5deg);
}

    If it’s not working leave the code in and let me know so I can take another look.

  • The topic ‘Adding animation to text and pictures?’ is closed to new replies.