• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Scroll triggered animation

Contributor ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

Id like my thumbnails to animate in on scroll one by one fading in and sliding up as they do here

 

https://smugglersite.com/global/commercials/aoife-mcardle/absolut-equal-love

 

current page:

https://toddheymandirector.com/reel/

 

ideally using CSS only

Views

644

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

LEGEND , Jun 21, 2022 Jun 21, 2022

You don't really need all that animate class stuff attached to your conatiners or any extra libraries All you need is the basics css classes:

 

<div class="thumb-container imageContainer">

 

Then use the intersection api to determine if the elements are in the browser view port:

 

<script>
if ( 'IntersectionObserver' in window ) {

let observer = new IntersectionObserver(function (entries, observer) {
var delay = 0;

entries.forEach(function (entry) {
if (entry.isIntersecting) {
setTimeout(function () {
entry.

...

Votes

Translate

Translate
LEGEND , Jun 21, 2022 Jun 21, 2022

All I can suggest is remove the 'faded' class from the containers, it's not needed.

 

Looking at the rest of your css, it's a bit of a mess, so I'm not surprised there might be more than a few conflicts.

Votes

Translate

Translate
Community Expert ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

I have previously used Wow.js library with Animate.css.  It has a light footprint and gets the job done with minimal fuss.

https://wowjs.uk/

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

Nancy hi!

 

thank you--

 

i just did a test page with wow and thought i did it correctly

 

https://toddheymandirector.com/reel/index22.html

 

installed wow.js and animate.css and added wow animate__animated animate__fadeInUp to the class 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

This is an example of Wow.js on a <div> tag that contains one image.

 

<div class="col wow fadeIn" data-wow-delay=".51s" data-wow-duration="1.55s">

IMAGE HERE

</div>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

thanks !- its a bit of a cheat but i did a delay on every other one 

 

https://toddheymandirector.com/reel/index22.html

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

almost got it

 

https://toddheymandirector.com/reel/index22.html

 

they dont go one at a time they go in rows 

 

the example was one at a time

https://smugglersite.com/global/commercials/aoife-mcardle/absolut-equal-love

 

they also seem to be just sliding not fading in even though the class is animate__fadeInUp

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

OT: Do you realise that you are feeding spam bots with this bit of code?

BenPleysier_0-1655768876340.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

thanks Ben - what do people do when they dont want to use a form (very impersonal in my biz)?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

Use bing to search for `email obfuscation`. One such a search gave me:

https://perishablepress.com/best-method-for-email-obfuscation/#:~:text=%20Best%20Method%20for%20Emai...

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

thanks ! thats enlightening - Ill obfuscate the heck out of it 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

This may also helpL

https://www.youtube.com/watch?v=HzLtvAPPU-U&t=7s

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

quote

what do people do when they dont want to use a form (very impersonal in my biz)?


By @reelhero

==========

Once your domain is blacklisted for spamming (even though you didn't do it), you'll have a mess on your hands.  Don't put yourself at risk.

 

Obfuscation might help, but it's not 100% fail-safe.  Robots have become more sophisticated at cracking encryption codes. 

 

A secure scripted contact form is the best way to protect yourself and your domain from exploitation by robot harvesters/spammers.  Ask your hosting provider what they recommend.  Or use a 3rd party service like Wufoo.com or JotForm.com.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 21, 2022 Jun 21, 2022

Copy link to clipboard

Copied

You don't really need all that animate class stuff attached to your conatiners or any extra libraries All you need is the basics css classes:

 

<div class="thumb-container imageContainer">

 

Then use the intersection api to determine if the elements are in the browser view port:

 

<script>
if ( 'IntersectionObserver' in window ) {

let observer = new IntersectionObserver(function (entries, observer) {
var delay = 0;

entries.forEach(function (entry) {
if (entry.isIntersecting) {
setTimeout(function () {
entry.target.classList.add('fadeIn');
}, delay);

delay += 200;

observer.unobserve(entry.target);
}
});
}, { rootMargin: "0px 0px -8% 0px" } );


// observe the elements to be animated
document.querySelectorAll( '.imageContainer' ).forEach( function (el) {
observer.observe(el);
} );

 

}

</script>

 

 

Then use the css as below:

 

<style>
.imageContainer {
opacity: 0;
transition: all 1s ease-in-out;
transform: translateY(130px);
}
.fadeIn {
opacity: 1;
transform: translateY(0);
}

</style>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 21, 2022 Jun 21, 2022

Copy link to clipboard

Copied

Osgood.. thank you! i wouldnt have built that site without you--

 

works beautifully--so elegant

 

https://toddheymandirector.com/reel/index_scroll.html

 

the only thing is i see - there seems to be a second fade in (ie it fades in fades out fades in again -noticably on the 2nd row which is immediately visible

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 21, 2022 Jun 21, 2022

Copy link to clipboard

Copied

All I can suggest is remove the 'faded' class from the containers, it's not needed.

 

Looking at the rest of your css, it's a bit of a mess, so I'm not surprised there might be more than a few conflicts.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 21, 2022 Jun 21, 2022

Copy link to clipboard

Copied

i knew it was the faded class causing it -- i dont even know why i asked - and yes ive made so any additions and adjustments on the fly but havent cleaned it up since you helped me a while ago - on it and thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 25, 2022 Jun 25, 2022

Copy link to clipboard

Copied

hi Osgood - im not sure what happened but suddenly its not working - even with the opacity set to 0 it shows up that disappears again the fades in again https://toddheymandirector.com/reel/index_scroll.html what did i do wrong?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 25, 2022 Jun 25, 2022

Copy link to clipboard

Copied

LATEST

found the conflict - apologies!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 20, 2022 Jun 20, 2022

Copy link to clipboard

Copied

As Nancy pointed out WOW.js is great but you do have to have animate.css to couple it together.

 

Knowing when an element is in view etc is the key aspect of such functionality.
https://dev.to/emmaccen/how-to-know-if-an-element-is-visible-in-viewport-c45
As well as when they scoll

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

 

That is the core guts and there are Javascript frameworks like this one:
https://camwiegert.github.io/in-view/
That just focus on giving you the knowledge when the element is in the view so you can do your own thing.

Wow.js and animate.css give you options (quite a lot) to choose a load of preset animations to do but if you want custom you can use the above information and then your own CSS animations to do that as well.

Just extra information really here for you 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jun 21, 2022 Jun 21, 2022

Copy link to clipboard

Copied

thank you

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines