How to apply Scrolling Animations when user starts scrolling a content - javascript

I need to Add some animations to an element when it is in viewport.
$(document).scroll(function(){
alert('How to animate with transitions left to right, top to bottom elements in my Structure ');
});
.main-container{
width:900px;
height:100%;
overflow:auto;
background:#00496d;
color:#fff;
}
#section1,#section2,#section3,#section4,#section5,#section6{
width:100%;
height:300px;
border:1px solid #fff;
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
<div id="section5"></div>
<div id="section6"></div>
</div>

Try Skrollr.js for animation on scroll. Although this is not updated for quite a long time, but you might give it a shot based on your requirement. It matches your ask above.

Try animation on scroll.
Download library of AOS ans add in your code. Here is the link where you can find library and also complete example how can use in your html class.
https://michalsnik.github.io/aos/

Related

Fixed Image On Scroll Shifting Position

JSFiddle: https://jsfiddle.net/DTcHh/19451/
I am building a website using Bootstrap 3. On scroll I have an image that sticks to the page by changing position to fixed. This works however it always shifts out of place once it turns fixed. I am aware this has something to do with the margins (and I have played with pixels and this seems to practically solve the problem, the margin-left needs to be a % for the responsive website). Here's the code:
HTML
<div class="row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
CSS
.screen-phone{
max-width:300px;
margin-top:25px;
margin-left:25%;
z-index:999;
}
Javascript
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop()>1120){
$('.screen-phone').css('position','fixed').css('top','0');
}else{$('.screen-phone').css('position','static');
};
});
});
Try this
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.screen-phone{
max-width:300px;
margin-top:25px;
//margin-left:25%;
z-index:999;
float:right;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
// var stickyPhone = ($#)
$(window).scroll(function () {
if ($(this).scrollTop()>500){
$('.screen-phone').css('position','fixed').css('right','0');
}else{$('.screen-phone').css('position','relative');
};
});
});
I Removed the margin-left and added a float right. Then on the JS i changed the position to left:0. It seams to work.
I made several changes that made it work:
Move the class name to the div element instead of the img element
Make the CSS changes only when necessary by using a boolean variable
The 500 pixel test was too long for the size of the text. When invoked, the change in size due to the image being fixed would shrink below 500 forcing another change, and so on.
See the updated jsfiddle: https://jsfiddle.net/DTcHh/19475/
Alright, I figured this out. What needs to be done is you put a separate class on the containing DIV. You give it left:(whatever your percent value is here). You take margin-left OFF the containing image. If using Bootstrap like me, you'll have to get around margin issues you can create two classes like I did to remove the margin of the row and col-sm-7. In my case I did:
.screen-phone{
max-width:300px;
margin-top:25px;
/*Removed margin-left:25%*/
z-index:999;
}
.sticker{
left:25%
}
.zero-row{
margin:0;
}
.no-margin{
width:0;
}
HTML:
<div class="row zero-row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7 no-margin sticker">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
Updated Fidde: https://jsfiddle.net/1chkghhq/1/

Making a scrollable div which doesn't scroll the rest of the body

Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working

Button resizing changing all design

Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>

Two scrollbar using the same css

I'm using custom scrollbar, add one scrollbar is very easy, but if I want to add second they twice use one mCustomScrollbar.css I don't know how to change that second div. I was looking on code on demo custom scrollbar but this just fail.
JQUERY
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
});
})(jQuery);
HTML
<link href="scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>
Some simply CSS
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
Just add another class on div with class="suwak", this will run your scrollbar and your second class will help override your first class. In css you are saying, if something has both classes, use new style. In css your selector would be .suwak.suwak2, no space between classes in css.
<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
.suwak.suwak2 {
/*new stile*/
}
Why don't you use second class as well? is it something that you don't know how many DIVs will be there to have same scrollbar?
If it is limited to 2 only, then try
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
$(".suwak2").mCustomScrollbar();
});
})(jQuery);
Or you can mention same class for second DIV as well. I have suggested this as per my observation of the code you posted.

javascript to overlay a modal popup that is center aligned

want to know Simply the javascript to overlay a div on centre of the page.
Just want to use plain java script to show and hide a div on the center of the page with "Please wait..." message and disable the background. Also this div shoud show on top of the other content of the page.
My div looks like this
<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div>
On click of a button , I want to show the div content center aligned on the page.
I do not want to use jquery,extjs,,etc to achieve this.
I have seen a few examples on the web with lot of other features added to a modal popup, just looking for something simple and clean.The bare minimum JS required to do this.
The div you want to display needs to have an ID:
<div id="loaderdiv">
Then in your javascript, you display this div with the following code:
document.getElementById("loaderdiv").style.display = '';
Thats the bare minimum you'll need.
Centering the image can be done using CSS:
<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px">
<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;">
example.com<br />
</div><!--overlay_msg-->
<div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()">
</div><!--my_overlay-->
<script type="text/javascript">
function showMyOverlay()
{
document.getElementById('my_overlay').style.visibility='visible';
document.getElementById('overlay_msg').style.visibility='visible';
}
function hideMyOverlay()
{
document.getElementById('my_overlay').style.visibility='hidden';
document.getElementById('overlay_msg').style.visibility='hidden';
}
</script>

Categories

Resources