Frameworks - Post ID 283078

User 2903050 Photo


Registered User
260 posts

So just adding this to your custom js

// ***Customised by Evan - next x3 lines - ensures out-of-view will only work on scroll down, not up***
if (scrolled + windowHeightPadded < offsetTop) {
$(this).addClass("outofview");
}


And this is the transitions you made within the program?


See: https://www.citychurchchristchurch.co.n … tofview.js[/quote]

Kind regards Phil
User 2839879 Photo


Registered User
99 posts

Phil Dias wrote:
And this is the transitions you made within the program?


The code I provided ensures the out-of-view animation only loads on scroll down, not up. By default, animation will load on both.

What transitions were you referring to?
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 2903050 Photo


Registered User
260 posts

I was thinking on the same line as yourself so the contents shift up as you scroll down?
User 2839879 Photo


Registered User
99 posts

For that I did something like this...

Out-of-view setting:
Margin-top: 60px
Opacity:0
Animation delay: .2
Animation duration: .4

Adjust setting to get a smooth result. My tip - better to make the viewer 'feel' like they saw the animation, rather than actually seeing it. I know that sounds a bit cryptic, but hopefully you know what I'm talking about.

I'd love to see what you're working on.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 2903050 Photo


Registered User
260 posts

Sorry what would you add the above code to?
Every container, or body or ??
User 2839879 Photo


Registered User
99 posts

Phil Dias wrote:
Sorry what would you add the above code to?
Every container, or body or ??


The child container you wish to animate when it comes into view.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/
User 2903050 Photo


Registered User
260 posts

Bainn wrote:

I'd love to see what you're working on.


Hi Bainn,

https://www.drivingwithphil.com

This is a site I finished a couple of months ago for my own business.
I have my first project for a paying client now but it's too in its infancy to show you anything substantial yet. But will definitely have something to show soon.
Regards Phil
User 2839879 Photo


Registered User
99 posts

Phil Dias wrote:
Bainn wrote:

I'd love to see what you're working on.


Hi Bainn,

https://www.drivingwithphil.com

This is a site I finished a couple of months ago for my own business.
I have my first project for a paying client now but it's too in its infancy to show you anything substantial yet. But will definitely have something to show soon.
Regards Phil


Very nice Phil. Well done.
CoffeeCup Websites:
City Church Christchurch: https://city.org.nz
Champion Freight: https://www.championfreight.co.nz/
eChamp: https://echamp.co.nz/
Champion Containers: http://championcontainersnz.com/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.