I incorporated a window.scroll function to activate when animations start on my page. I have three different images, that look like this:
image
image
image
I am wanting them to appear once I scroll to their div. However, for some reason right now, if I go over one of them, the entire sequence starts for all of them.
My window scroll function looks like this:
$(function() {
var oTop = $('.home-img-block', this).offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
imgDelaysSlide();
}
});
});
The HTML looks like this:
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
Should the this in my window.scroll function make these animations start when I hover over the current div class?
var oTop = $('.home-img-block', this).offset().top - window.innerHeight;
$(window).scroll(function() {
Is there anything else I could try to do to call out that specific div, rather than the entire class?
UPDATE adding imgDelaysSlide function
function imgDelaysSlide() {
$('.fadeBlock1').delay(300).animate({
'left': '0%'
}, 700);
$('.fadeBlock2').delay(800).animate({
'left': '0%'
}, 700);
$('.fadeBlock3').animate({
'left': '0%'
}, 700);
}
Related
I have a client who has several powerpoint slides that they want to animate through seamlessly as the user scrolls down the page vertically. It is similar to this page:
http://www.bagigia.com/
Any advice on how to accomplish this? If you're familiar with webflow - that's usually the program of choice I use to help create the clean code for fast deployment but even raw code is totally welcome, OF COURSE!
Essentially, they have a water bottle that they have taken photos of in different positions and as they scroll down the page they want the water bottle to turn on its side and then towards the viewer. They have all of these images photographed and isolated but I can't figure out how to code it so that the bottle appears to animate.
From looking at the Bagigia source code it appears they have a bunch of ordered divs with background images inside a parent container #rotation .container. Each div has one angled product photo set as the background-image.
The jQuery code is bound to scroll events with $window.bind('scroll', function(){/*code*/}) which updates the .container's left property by a certain amount each time. This gives the impression of the images animating in rotation where really it is just sliding images to the left and off the visible area.
It is worth noting that the div elements have their width and height set on page load and on window resize event. This helps to determine what the left position should be updated by.
You can see all of this in their source code which is quite neatly formatted. Check out their script for the home page rotation at http://www.bagigia.com/js/bagigia.home.rotation.js?v=d38yhf5
Your question was only about the image rotation so I won't comment on the other features however you can always view the other source code as needed.
Good luck on building this yourself. I'd be interested in the results if you are able to share it, or perhaps write a blog post to share your approach, learnings, and outcomes.
Should Bagigia update/remove their website, I've pasted some of the relevant code below which is directly from their source and not my own work.
<div id="rotation">
<div class="popup">
<div class="item" id="popup-bag1"></div>
<div class="item" id="popup-bag5"></div>
<div class="item" id="popup-bag12"></div>
<div class="item" id="popup-bag17"></div>
<div class="item" id="popup-bag21"></div>
</div>
<div class="container">
<div class="bag-angle show" id="bag0" rel="popup-bag1"></div>
<div class="bag-angle" id="bag1" rel="popup-bag1"></div>
<div class="bag-angle" id="bag2" rel="popup-bag1"></div>
<div class="bag-angle" id="bag3"></div>
<div class="bag-angle" id="bag4"></div>
<div class="bag-angle" id="bag5" rel="popup-bag5"></div>
<div class="bag-angle" id="bag6" rel="popup-bag5"></div>
<div class="bag-angle" id="bag7" rel="popup-bag5"></div>
<div class="bag-angle" id="bag8"></div>
<div class="bag-angle" id="bag9"></div>
<div class="bag-angle" id="bag10"></div>
<div class="bag-angle" id="bag11"></div>
<div class="bag-angle" id="bag12" rel="popup-bag12"></div>
<div class="bag-angle" id="bag13" rel="popup-bag12"></div>
<div class="bag-angle" id="bag14" rel="popup-bag12"></div>
<div class="bag-angle" id="bag15"></div>
<div class="bag-angle" id="bag16"></div>
<div class="bag-angle" id="bag17" rel="popup-bag17"></div>
<div class="bag-angle" id="bag18" rel="popup-bag17"></div>
<div class="bag-angle" id="bag19" rel="popup-bag17"></div>
<div class="bag-angle" id="bag20"></div>
<div class="bag-angle" id="bag21" rel="popup-bag21"></div>
<div class="bag-angle" id="bag22" rel="popup-bag21"></div>
<div class="bag-angle" id="bag23" rel="popup-bag21"></div>
<div class="bag-angle" id="bag24"></div>
<div class="bag-angle" id="bag25"></div>
</div>
<div class="content">
</div>
</div>
$(document).ready(function(){
var $window = $(window);
var $introBox = $('#intro');
var $rotationBox = $('#rotation');
var $containerBox = $('#rotation .container');
var $bags = $('#rotation .bag-angle');
var blankHeight = 200;
var index = -1;
var $blankOpen = $('<div class="bag-blank"></div>');
$blankOpen.height($window.height() + blankHeight).appendTo($('#bag-blank-space'));
$bags.each(function(index){
var $blank = $('<div class="bag-blank" rel="bag' + index + '"></div>');
$blank.height(blankHeight).appendTo($('#bag-blank-space'));
});
$('.bag-blank:last').height(blankHeight/2);
$window.bind('scroll', function(){
var opacity = ($window.scrollTop()) / (($window.height()));
if (opacity <= 1){
if ($window.scrollTop() <= $introBox.height()){
$rotationBox.css({opacity: opacity});
}
}else{
$rotationBox.css({opacity: 1});
}
$('#bag-blank-space .bag-blank').each(function(i){
if ($window.scrollTop() > $(this).position().top){
index = i;
}
});
if (index < $bags.length){
var $toShow = $('#rotation .bag-angle:eq(' + index + ')');
var $toHide = $('#rotation .bag-angle.show');
if (!$toShow.hasClass('show')){
$toShow.addClass('show');
$toHide.removeClass('show');
var $popup = $('.popup .item#' + $toShow.attr('rel'));
if ($popup.length > 0 && !$rotationBox.is(':animated') && $rotationBox.position().top >= 0){
if (!$popup.hasClass('show') && !$rotationBox.hasClass('hide')){
$('.popup .item.show').removeClass('show').stop(false,true).animate({opacity:0},'fast');
if ($rotationBox.position().top >= 0){
$popup.addClass('show').stop(false,true).animate({opacity:1},'fast');
}
}
}else{
$('.popup .item.show').removeClass('show').stop(false,true).animate({opacity:0},'fast');
}
$containerBox.css({left: -1 * index * $window.width()});
}
if ($rotationBox.hasClass('hide')){
$rotationBox.removeClass('hide');
$('#payoffs .payoff-item:not(:first)').css({opacity:0});
$('#payoffs .payoff-item:first').addClass('show').animate({
opacity:0
},'slow', function(){
$('.payoff-bg-text').css({opacity:0});
$('.popup .item').stop().css({opacity:0}).show();
$rotationBox.stop(true,true).animate({top: 0},'slow', 'easeInOutBack',function(){$('.popup .item.show').stop().animate({opacity:1})});
});
}
}
});
$window.bind('resize', function(){
$('.bag-blank:first').height($window.height() + blankHeight);
$('.bag-blank:last').height(blankHeight/2);
$bags.width($window.width());
$bags.height($window.height());
$containerBox.css({left: -1 * index * $window.width()});
});
$bags.width($window.width());
$bags.height($window.height());
});
I am creating a website using WordPress, so the content is created dynamically.
The elements ID is also dynamically generated
Each container can have these elements (a container can have multiple - but not the same):
t_1
f_1
f_2
f_3
I also add the container count at the end of the elements ID, so each element will have a unique ID
Let's say the PHP will generate a HTML like this:
<div id="container_1">
<div id=f_1_1>
//content
</div>
<div id=f_2_1>
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2>
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3>
//content
</div>
</div>
I would like to animate the position of these elements as the user scrolls, I added javascript to do it:
var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
scroll = window.pageYOffset;
requestAnimationFrame(scroll)
}, false)
function scroll() {
document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}
So here is the problem, I don't know which elements should I get by ID.
I thought about making a loop where I check each container for the elements inside, however I think it would use too much resources and would be laggy as the function runs each time the user scrolls.
An other solution I tried is to add the javascript dynamically to each container so I know exactly which elements I need to animate. It worked only for the first container as when I added the next container there were multiple function using the same name and only the last function has been executed
<div id="container_1">
<div id=f_1_1>
//content
</div>
<script type="text/javascript">
function scroll() {
document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
}
</script>
</div>
You can use - WOW.js for animation when element is comes inside viewport.
<div id="container_1">
<div id=f_1_1 class="wow myCustomAnimation">
//content
</div>
<div id=f_2_1 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_2">
<div id=t_1_2 class="wow myCustomAnimation">
//content
</div>
</div>
<div id="container_3">
<div id=f_1_3 class="wow myCustomAnimation">
//content
</div>
</div>
Where you have to write myCustomAnimation as per your requirment.
I have this quistion about scrolling in a div with the MDL framework
THE GOAL is to scroll to the bottom of the div after 4 seconds
This is my jquery:
$('#user-select').on('change', function() {
$("html, body").delay(4000).animate({ scrollTop: $(document).height() }, 1000);});
I also tried this:
$('#user-select').on('change', function() {
setInterval(function() { $('#chat').animate({scrollTop: $('#chat').height()}, 1000); },4000);});
This is my html:
<div style="width:100%;" id="chat_box">
<div id="chat">
</div>
</div>
The content of the div loads via a AJAX Request
The final code looks like this:
<div style="width:100%;" id="chat_box">
<div id="chat">
<div class="bubble right">
<div class="content">
Test 1</div>
</div>
<div class="bubble left">
<div class="content">
Test 1
</div>
</div>
</div>
</div>
I have tried multiple options for scrolling down in divs with jquery but none of them worked
Thanks A lot!!
I have found out how:
Jquery
var scrollTo = function(top) {
var content = $(".mdl-layout__content");
var target = top ? 0 : $(".page-content").height();
content.stop().animate({ scrollTop: target }, 3000);
};
var scrollToTop = function() {
scrollTo(true);
};
var scrollToBottom = function() {
scrollTo(false);
};
And than call the function after 4 seconds
setTimeout(scrollToBottom, 4000)
Thanks to MDLHUT on CodePen
I have a page with the following structure:
<div id="about" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="films" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="projects" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
I would like that when clicking on the image, you will be scrolled to the end of the <div> where the <img>is located.
I have stated with this code but it works only for the first image.
function go_to(){
$("body,html").animate({scrollTop: $('.section').height()}, 900, "easeInOutExpo");
}
$(document).ready(function(){
var go_to_div = $('.button img');
$(go_to_div).click(function(event) {
go_to()
});
});
If necessary, I can change the HTML structure. Thank you!!
Because for scrollTop property, you need to give a value to go there. Your $('.section').height() code allways gives the same value so it kinda stuck. Try this instead
function go_to(section){
var pos = section.position();
$("body,html").animate({scrollTop: section.height() + pos.top}, 900, "easeInOutExpo");
}
$(document).ready(function(){
$('.button img').click(function(event) {
go_to($(this).closest(".section"));
});
});
FIDDLE
I need to make some simple JavaScript gallery with Thumbnail slider.
I made the slider and when I click on the left or the right arrow the margin-right change and add or remove 570px. But I want to make it better, and when the gallery loads, cancel the Scroll right option because there's actually pictures, the same also for last images.
HTML Structure look like this:
<div class="tumbNavigation">
<div class="right_nav"></div>
<div class="thumbnails">
<div class="thumbnailsWrapper">
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
<div class="thumbItem"></div>
</div>
</div>
<div class="left_nav"></div>
</div>
JavaScript code look like this:
var pos = 0;
var width = 570;
$('.left_nav').click(function(){
pos = pos - width;
$('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
});
$('.right_nav').click(function(){
pos = pos + width;
$('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
});
You're on the right track, but there's no need to reinvent the wheel here. Carousels such as this are one of the most commonly developed widgets, so much so that you're bound to find something that's better, more stable, and has more features than anything you could quickly build. Here's a list of 55 carousel javascript plugins: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html . I'm sure that one of them will work great for you, or it will be close enough that you can modify it to be perfect.