Generate animation inside a container from right to left - javascript

I am trying to move a yellow square on the right side of the container, towards the left side of the container. The problem is that if it has no absolute position, it will not work.
Also I would like to know how to do the same animation with the second square, but that it starts to move one second after the first square. How can I do it?
http://jsfiddle.net/ohtkmes8/
var left = $('#coolDiv').offset().left;
$("#coolDiv").css({
left: left
}).animate({
"left": "0px"
}, 9000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="coolDiv">cool</div>
<div id="coolDiv2">other text</div>
</div>

Here you go with a solution https://jsfiddle.net/q2kgmvog/
$("#coolDiv").animate({"left":"0px"}, 9000);
#coolDiv{
position: absolute;
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="coolDiv">cool</div>
<!--<div id="coolDiv2">other text</div>-->
</div>
Set the position:absolute; to the moving div & right: 0px;.
Animate it to left:0px; using jQuery animation.
Hope this will help you.

Related

Can't figure out how to scroll down/up by 50px in js when i click a button

This is the code I have currently. What I want to do, is when I click a button - Move up- I want the text in area3 to move up by 50px. But right now its moving all the way back up to the top. This is for a h/w assignment and we're doing pretty basic js/jquery if that needs to be said? :) Any help will be appreciated! Thanks!
$("#moveUp").click(function(event){
event.preventDefault();
var scrollPos = $(".area").scrollTop();
var newPos = scrollPos - 50;
$(".area3").scrollTop(newPos);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
blah blah
</div>
<div class="area4">
<button id="moveUp">Move Up</button>
</div>
If I'm not wrong, I think this could help you:
$("#moveup").click(function(){
$(".area3").css({"margin-top":"-=50px"});
});
$("#moveUp").click(function(event){
window.scrollTo(0, window.scrollY - 50)
})
window.scrollTo(x, y) is a method which will scroll the screen to given coordinates where x is horizontal and y vertical. The top left corner of the screen is 0, 0. Than window.scrollY gets the current vertical position of the screen, you just need to subtract 50 to scroll 50px up from your current position
if you want just the text in area3 to move you should use some css to correctly implement this behavior with jQuery, using animate() to add some ease with smooth animation to the text.
$("#moveUp").click(function(event){
event.preventDefault();
$('.area3').animate({
position: 'absolute',
bottom: +50
}, 'slow');
})
.area3 {
position: relative;
height: 200px;
}
.area3 span {
position: absolute;
bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
<span>blah blah</span>
</div>
<div class="area4">
<button id="moveUp">Move Up</button>
</div>
but if you want the whole window to scroll you can do that as following we using the same approach with different selectors body and html
$("#moveUp").click(function(event){
event.preventDefault();
$('body, html').animate({
scrollTop: -50
}, 500);
})
body, html {
height: 1000px
}
.area3 {
margin-top: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area3">
<span>blah blah</span>
</div>
<div class="area4">
<button id="moveUp">Move Up</button>
</div>
if you wanna to do it with window interface you can occur that by changing the above code to
$("#moveUp").click(function(event){
event.preventDefault();
window.scrollTo(0, -50);
})
with this approach using window you can make it moving smoothly like we did above you can't use jQuery animate() API javascript gonna raise an error don't do that.

Scroll effect to change opacity of each new div element

I am new to website design and have a question I'd like to ask. I have tried to use velocity.js to achieve this with failure. I am sure there is a rather simple css solution for what i want. I just want the previous div to "fade" and the new div that's scrolled to, to fade in with greater opacity. Open to any jQuery examples as well.
Here is my code for the section in question:
html:
<section id="services">
<h2 class="pb-5">Services We Offer</h2>
<div id="service1">
<h2>Service 1</h2>
</div>
<div id="service2">
<h2>Service 2</h2>
</div>
<div id="service3">
<h2>Service 3</h2>
</div>
</section>
css:
#services{
}
#service1{
height: 100vh;
background-color: rgb(44, 49, 90);
}
#service2{
height: 100vh;
background-color: #267481;
}
#service3{
height: 100vh;
background-color: #373f24;
}
I am sure there is a rather simple css solution for what i want
Unfortunately, that is not the case. CSS can perform animations, but if scrolling is involved in any way, JS is required.
You could use something like animate.css to control your CSS animations and then use wow.js to make them load on scroll.
As before stated by other answers and comments you cannot manipulate the scroll event in css alone but here is a simple jquery example that may help you. You can add and remove classes on scroll and you can add an animation to the css to control the opacity of your div.
$(window).on("scroll", function(){
var scrollTop = $(this).scrollTop();
$('.scrollDiv').each(function(){
var el = $(this);
var offsetTop = el.offset().top;
if(scrollTop > offsetTop){
el.addClass("scrolled");
}else{
el.removeClass("scrolled");
}
});
});
.scrollDiv{
height:100vh;
transition:opacity 500ms ease-in-out;
opacity:0.2;
}
.scrollDiv.scrolled{
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollDiv" style="background:green;"></div>
<div class="scrollDiv" style="background:red;"></div>
<div class="scrollDiv" style="background:blue;"></div>
<div class="scrollDiv" style="background:yellow;"></div>

Automatically Scrolling a webpage with animating div

I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.
You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/
I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers

How to scroll a specific div up after the page is scrolled to a fixed level?

I have a HTML like below;
<div style="width: 100%; position: fixed"><div class="divb">red</div></div>
<div style="position: fixed;" class="diva">blue</div>
<div class="content1" style="background-color: #3333FF">content</div>
<div class="content2" style="background-color: #FF3300">content</div>
<div class="content3" style="background-color: #006600">content</div>
<div class="content4" style="background-color: #660099">content</div>
There is a bar on top, and a square in it's middle. Both are absolutely positioned to stay at top. I have 4 divs below them, each cascaded one after another, 400px wide and high. when content divs scroll, the bar and square will remain on top. But I want square to scroll up with content div 1. So after content div 1 scrolls up completely from the page, square should go up with content div 1, and should not be visible any more. How can I do this?
Below are two images showing what I am trying to say;
Current
Required
Here is the fiddle.
write position:absolute not fixed in red
<div style="width: 100%; position: absolute "><div class="divb">red</div></div>
You need just move block with class divb into div with class content1:
div style="width: 100%; position: fixed"></div>
<div style="position: fixed;" class="diva">blue</div>
<div class="content1" style="background-color: #3333FF"><div class="divb">red</div>content</div>
<div class="content2" style="background-color: #FF3300">content</div>
<div class="content3" style="background-color: #006600">content</div>
<div class="content4" style="background-color: #660099">content</div>
You can do something like this:
//get the height of the #top (I assigned #top id for one of your top divs)
var topHeight = $('#top').height() + 30;
//get all the top divs, it's better to wrap all the top divs in some container
//but you don't do that.
var topDivs = $('#top, .diva, .divb');
//handle the onscroll event
$(window).scroll(function(e){
var rect1 = $('.content1')[0].getBoundingClientRect();
if(rect1.bottom <= topHeight){
topDivs.css('top', rect1.bottom < 0 ? -topHeight : rect1.bottom - topHeight);
} else topDivs.css('top', 0);
});
We just add some transition property for the top divs to animate the transition. Here is the demo.
Demo.

jquery animate a div to the center

html:
<div id="container">
<div id="header">
<div id="animate">
cartagena
</div>
</div>
what I want to do is to move the "animated" div to the center using Jquery.
my current js:
$(document).ready(function() {
$("#animate").animate({left: "+=512"}, 2000);
});
and now I'd like to make it to the center instead of just 512 px to the right.
I am assuming that the position of #animate is absolute. To center the element in its parent element just add the half of its parent's width minus the half of its own width to left:
$("#animate").animate({
left: $("#animate").parent().width() / 2 - $("#animate").width() / 2
}, 2000);
I created a demo using jsFiddle.
You can use it this way to center it to the screen,
Jquery
$(document).ready(function() {
$("#animate").animate({left: $(window).width() / 2}, 2000);
});
css
<style type="text/css">
div
{
height: 50px; width: 50px; background-color: Red;position:absolute; top:0; left:0;
}
</style>
html
<div id="container">
<div id="header">
<div id="animate">
cartagena
</div>
</div>
</div>
Asuming you want to center to window, use this code:
$("#myJQUIDialog").parent().position({
my: "center",
at: "center",
of: window,
using: function (pos, ext) {
$(this).animate({ top: pos.top }, 600);
}
});
This center the dialog, and animate at the same time, resulting in a smooth centering
Here it is other example, maybe it should be useful.
I am using 'scroll' to make the effects.
Hope it could help or be useful :)...
<http://jsfiddle.net/p609dm7y/2/>

Categories