Who i am?

My Photo My name is Blossom Themes.

Latest Tweets!

Recent Comments

Advertisement

Hello! My name is Blossom Themes.

Home   ›   How To  ›   javascript  ›   Tutorial  ›   jQuery Activated Scrolling CSS Animation Tutorial
July 25, 2016

jQuery Activated Scrolling CSS Animation Tutorial

jQuery and CSS when used together it creates unforgettable things. CSS we used for the styling purpose and the jQuery for the action purpose. When we combine this two together they are going to make something new, something which is totally insane. There are limitless things when we use those two for the webdesign purpose. These two are the backbones for every web-designer and every website over the internet is supposed to have this. The combination of these two can be seen for the drop-down menus, modals, slideshow carousel and in many other ways.

Today also we are going to use these for creating the scrolling based animations. In this we will go on creating a HTML page which will be totally animated through scrolling. We will go on creating the animation transitions and jQuery script which will be the main file to run the animation.
You can also download the complete package from the link given below :
JavaScript Obfuscator Tool v1.0.0


 Tutorial:

HTML, JS & CSS:
<!--container-->
<div class="container-fluid">
<div class="table_block row">
<div class="header col-sm-12">
<h1>jQuery Based Scrolling Effects</h1>
<a href="#start">Get Started</a>
</div>
</div>
<div id="start" class="responsive col-sm-12">
<img class="phone" src="https://3.bp.blogspot.com/-4Ejms2fWLfE/V4ixCv8an4I/AAAAAAAACMs/9AlIcK1nrNIy2Gs4XgK7Bd6JQJeneTBLwCKgB/s1600/phone.png"/>
<img class="screen" src="https://3.bp.blogspot.com/-BYW_BrfIeOA/V4iwywTLNTI/AAAAAAAACMk/LGk9h_atkDQIYCTS8PGoanksJPaUV5kPACLcB/s1600/screen.png"/>
<img class="tablet" src="https://2.bp.blogspot.com/-JVGpvN1g-bY/V4it1F-LjjI/AAAAAAAACMU/U92AQxMhTvkJpO8SIbEU9fhRbwgloP52wCLcB/s1600/tablet.png"/>
</div>
<div class="title">
<h1>The simple animation</h1>
</div>
<div class="advance col-sm-12">
<img class="iphone_bg" src="https://4.bp.blogspot.com/-3soMlaGrXlg/V4islnfGOoI/AAAAAAAACMI/lzV3-95aa5kYo-rF69xwAnQ3jALcYNitwCLcB/s1600/gold_bg.png"/>
<img class="iphone" src="https://1.bp.blogspot.com/-KyUyuLqqTNk/V4itC6i894I/AAAAAAAACMM/Ly3A6CgygaIMNCcn0Cd6Y092R64Mk57zgCLcB/s1600/gold.png"/>
</div>
<div class="title">
<h1>Something more..</h1>
</div>
<div class="table_block row" style="max-height: 300px;">
<div class="header col-sm-12" style="max-height: 300px;">
<h1>The limit is only your imagination!</h1>
<h1>Got new ideas? Let me know in comments!</h1>
</div>
</div>
</div>
<!--/container-->
view raw index.html hosted with ❤ by GitHub

jQuery based scrolling animation effects

the simple demo of jQuery based animation effects.

A Pen by Abhishek on CodePen.

License.

view raw jQuery based scrolling animation effects.markdown hosted with ❤ by GitHub
$(document).ready(function(){
$(window).scroll(function(event){
var y_cordinate = $(this).scrollTop();
var simple = $('.responsive').position();
var advance = $('.advance').position();
var simpleht = $('.responsive').height();
var advanceht = $('.advance').height();
if(y_cordinate >= (simple.top - simpleht)){
$('.responsive img').addClass('animate');
}else{
$('.responsive img').removeClass('animate');
}
if(y_cordinate >= (advance.top - advanceht )){
$('.advance img').addClass('animate');
}else{
$('.advance img').removeClass('animate');
}
});
});
view raw script.js hosted with ❤ by GitHub
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
view raw scripts hosted with ❤ by GitHub
body, html, .container-fluid{
width: 100%;
height: 100%;
padding: 0px;
margin:0px;
outline: 0px;
border: 0px;
font-family: Open Sans;
font-weight: 300;
}
a{
color: #fff;
text-decoration: none;
border:1px solid #fff;
padding: 5px 10px;
transition: 400ms ease-in-out background;
}
a:hover{
background: rgba(255,255,255,0.1);
}
.header h1{
font-family: Open Sans;
font-weight: 300;
}
.responsive{
padding-top:4em;
padding-bottom: 4em;
}
.table_block{
display: table;
width: 100%;
height: 100%;
}
.col-sm-12 {
text-align: center;
}
.phone{
height: 250px;
z-index: 3;
}
.screen{
height: 475px;
}
.tablet{
height: 335px;
}
.header{
background: rgb(11,121,243);
height: 100%;
position: relative;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
color: #fff;
}
.responsive > img{
position: relative;
}
.title h1{
text-align: center;
color:#222;
font-family: Open Sans;
font-weight: 300;
}
.animate{
transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: 1s ease-in-out;
}
.phone.animate{
transform: translate(7em, 0px);
-moz-transform: translate(7em, 0px);
-webkit-transform: translate(7em, 0px);
}
.tablet.animate{
transform: translate(-10em, 0px);
-moz-transform: translate(-10em, 0px);
-webkit-transform: translate(-10em, 0px);
}
.advance img{
height: 450px;
position: relative;
}
.iphone{
transform: translate(-70px,0px);
}
.iphone_bg{
transform: translate(110px,0px);
}
.iphone_bg.animate{
transform: translate(40px, 0px);
-moz-transform: translate(40px, 0px);
-webkit-transform: translate(40px, 0px);
}
@media (max-width: 1250px) and (min-width: 901px){
.phone{
height: 200px;
z-index: 3;
}
.screen{
height: 360px;
}
.tablet{
height: 250px;
}
}
@media (max-width: 900px) and (min-width: 551px){
.phone{
height: 120px;
z-index: 3;
}
.screen{
height: 215px;
}
.tablet{
height: 150px;
}
}
@media (max-width: 550px) and (min-width: 280px){
.phone{
height: 60px;
z-index: 3;
}
.screen{
height: 110px;
}
.tablet{
height: 70px;
}
.iphone{
height: 250px !important;
}
.iphone_bg{
height: 250px !important;
}
.iphone_bg{
transform: translate(70px,0px);
}
.iphone_bg.animate{
transform: translate(20px, 0px);
-moz-transform: translate(20px, 0px);
-webkit-transform: translate(20px, 0px);
}
}
view raw style.css hosted with ❤ by GitHub
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" />
view raw styles hosted with ❤ by GitHub

Live Demo:
How To, javascript, Tutorial
Share: / / /

No comments:

Post a Comment

Lost Something?

Advertisement

Popular Posts