THE WAY to animate elements when in view

Developer
Mihovil Ilakovac
Size
3,509 Kb
Views
10,120
  1. THE WAY to animate elements when in view Previews
  2. THE WAY to animate elements when in view HTML Codes
  3. THE WAY to animate elements when in view CSS Codes
  4. THE WAY to animate elements when in view JS Codes

How do I make an the way to animate elements when in view?

A technique I was wondering about and decided to make an example. Used Remy's plug-in. Thanks Remy.. What is a the way to animate elements when in view? How do you make a the way to animate elements when in view? This script and codes were developed by Mihovil Ilakovac on 31 October 2022, Monday.

THE WAY to animate elements when in view Previews
IQ Test

THE WAY to animate elements when in view - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>THE WAY to animate elements when in view</title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.0.2/css/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <h1>Scroll me babe :P </h1> <p>Simple use-case for a "inview" plug-in. I think it works best when watched in the full example view. <a href="https://twitter.com/infomiho" target="_blank">@infomiho</a></p> <div class="panel animate1"><button>Lorem ipsum.</button></div> <div class="panel animate1"><button>Excepturi praesentium.</button></div> <div class="panel animate1"><button class="alert">Quod iure.</button></div> <div class="panel animate1"><img src="http://placecage.com/300/300" alt="" /></div> <div class="panel animate2"><button>Incidunt maxime?</button></div> <div class="panel animate2"><button>Quo consequatur.</button></div> <div class="panel animate2"><img src="http://placecage.com/300/300" alt="" /></div> <div class="panel animate2"><button>Optio aspernatur.</button></div> <div class="panel animate1"><button>Magnam omnis!</button></div> <div class="panel animate1"><button>Dolorum atque.</button></div> <div class="panel animate2"><button>Blanditiis officiis.</button></div> <div class="panel animate1"><button>Alias repudiandae.</button></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

THE WAY to animate elements when in view - Script Codes CSS Codes

.row { margin-top: 1.5em;
}
.animate1 { -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0;
}
.animate1.active1 { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 500ms; -o-transition-duration: 500ms; -webkit-transition-duration: 500ms; transition-duration: 500ms;
}
.animate2 { -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0;
}
.animate2.active2 { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 500ms; -o-transition-duration: 500ms; -webkit-transition-duration: 500ms; transition-duration: 500ms;
}
::-webkit-scrollbar { width: 12px;
}
::-webkit-scrollbar-track { background-color: #eaeaea; border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb { background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover { background-color: #aaa;
}

THE WAY to animate elements when in view - Script Codes JS Codes

// in-view plugin
/** * author Remy Sharp * url https://remysharp.com/2009/01/26/element-in-view-event-plugin/ */
(function ($) { function getViewportHeight() { var height = window.innerHeight; // Safari, Opera var mode = document.compatMode; if ((mode || !$.support.boxModel)) { // IE, Gecko height = (mode == 'CSS1Compat') ? document.documentElement.clientHeight : // Standards document.body.clientHeight; // Quirks } return height; } $(window).scroll(function () { var vpH = getViewportHeight(), scrolltop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop), elems = []; // naughty, but this is how it knows which elements to check for $.each($.cache, function () { if (this.events && this.events.inview) { elems.push(this.handle.elem); } }); if (elems.length) { $(elems).each(function () { var $el = $(this), top = $el.offset().top, height = $el.height(), inview = $el.data('inview') || false; if (scrolltop > (top + height) || scrolltop + vpH < top) { if (inview) { $el.data('inview', false); $el.trigger('inview', [false]); } } else if (scrolltop < (top + height)) { if (!inview) { $el.data('inview', true); $el.trigger('inview', [true]); } } }); } }); // kick the event to pick up any elements already in view. // note however, this only works if the plugin is included after the elements are bound to 'inview' $(function () { $(window).scroll(); });
})(jQuery);
$(document).ready(function () { $('.animate1').on('inview', function (event, visible) { if (visible == true) { $(this).addClass("active1"); } }); $('.animate2').on('inview', function (event, visible) { if (visible == true) { $(this).addClass("active2"); } }); //added this because of CodePen - not needed in a normal use-case scenario $(window).scroll();
});
THE WAY to animate elements when in view - Script Codes
THE WAY to animate elements when in view - Script Codes
Home Page Home
Developer Mihovil Ilakovac
Username infomiho
Uploaded October 31, 2022
Rating 4.5
Size 3,509 Kb
Views 10,120
Do you need developer help for THE WAY to animate elements when in view?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mihovil Ilakovac (infomiho) Script Codes
Name
Rss Feed App design
A Pen by Mihovil Ilakovac
An interesting marketing technique
OE 7. zad
OE 4. zad
Magic Wizard Concept
Add class, animate then remove
CSS3 Elevator
OE 6. zad
Exploration of the geolocation
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!