pin element with scrollmagic related to div - javascript

I have created a simple animation with ScrollMagic: a wheel rotating while horizontally scrolling the page. The problem is that when scrolling the window page the animation appears smooth, while when scrolling just the div inside which the element is placed, the animations is quite "jerk".
I would like to hide the window scroll leaving just the div scroll, keeping the animation smooth.
Does anyone know why and how to solve this problem?
var controller = new ScrollMagic.Controller({
vertical: false
});
var tween = TweenMax.to("#weel", 1, {
rotation: 1080,
ease: Linear.easeNone
});
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger",
duration: 5000
})
.setTween(tween)
.setPin("#weel", {
pushFollowers: false
})
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
body {}
.weel img {
width: 100px;
}
#scrolldiv {
height: 500px;
width: 5000px;
background: url(bgterritorio.jpg);
position: relative;
}
.scrollcontainer {
overflow-x: scroll;
white-space: nowrap;
position: relative;
}
<div class="scrollcontainer">
<div id="scrolldiv" class="scrolldiv">
<div class="weel">
<img id="weel" src="weel.png" alt="">
</div>
</div>
<div id="trigger">
</div>
</div>

Solved!
It was necessary tell ScrollMagic which container the animation is referred to. In my case, I just add:
container: '.scrollcontainer'
to the controller object

Related

Horizontal scroll with scrollmagic and dynamic child widths

I am playing with scrollmagic.
I would like to include horizontal scrolling. The child elements must be able to have different widths.
I can not find anything that suits my research.
Has anyone ever implemented that or possibly resources for me?
I do not like to have the widths of the child elements calculated dynamically by Javascript.
First you need to create two main divs horizontal-scroll-container and scroll-container , then include the child divs:
<div class="horizontal-scroll-container"> <!-- Will be the fixed main container on animation start -->
<div class="horizontal-scroll"> <!-- Will be the scrolling container that include the childs -->
<div class="scroll-child 1"> <!-- Then the childs (You can set the width that you want) -->
<div class="scroll-child 2">
<div class="scroll-child 3">
</div>
</div>
Style those divs:
.horizontal-scroll-container {
position:relative; //Will be fixed on animation start.
width: 100%; //full width
height: 100vh; //full height
padding:3rem 0; //The padding you would like to use between the childs and father.
background-color: rgba(191, 70, 169, 0.5);
overflow-x:hidden; //Because the childs will exceed the viewport width.
}
.horizontal-scroll {
position: absolute;
top: 0;
display: flex;
width: 250%; //The sum of the 3 container widths.
bottom: 0;
margin: auto;
height: 50%; //Try not to exceed viewport height.
}
.horizontal-scroll .scroll-child {
width:100%; //or whatever width you want to set, make sure to set .horizontal-scroll width relative to the SUM of those child widths.
margin:0;
padding: 0;
color:white;
position: relative;
}
.horizontal-scroll .scroll-child.2 { //changing the width of the child 2
width:50%;
}
After that, you need to use GSAP TimeLineMax plugin to implement this example.
//Create new scrollmagic controller
var controller = new ScrollMagic.Controller();
//Create horizontal scroll slide gsap function
var horizontalSlide = new TimelineMax()
.to(".horizontal-scroll", 3, {x: "-65%"}); //Depends on the final width you want to scroll.
// Create scrollmagic scene to pin and link horzontal scroll animation
new ScrollMagic.Scene({
triggerElement: ".horizontal-scroll-container", //Div that will trigger the animation.
triggerHook: "onLeave", //The animation will start on leaving the .horizontal-scroll-container section.
duration: "200%" //Scroll Duration, the amount of pixels you want to scroll to see the entire animation.
})
.setPin(".horizontal-scroll-container")
.setTween(horizontalSlide)
.addIndicators() // add indicators (requires scrollmagic indicators plugin)
.addTo(controller);

Div to swipe elements inside

I'm trying to make a div to swipe dynamically content in a iframe. Well, i have the code for swipe and others functions working fine, i just need help to create a div that work like a glass over all others element to swipe it, you know?
Here is my code:
HTML
<html>
<body>
<div id="swiper">
<main class="mdl-layout__content" id="main">
<div id="slider">
<iframe id="content"></iframe>
<div class="left_hold"><img id="left_-1" onClick="slideMove(this)" class="left" src="Images/arrow_left.png"></div>
<div class="right_hold"><img id="right_1" onClick="slideMove(this)" class="right" src="Images/arrow_right.png"></div>
</div>
</main>
</div>
</body>
</html>
The content(html pages) is dinamically put in the iframe element. The div to swip is id="swiper".
CSS:
#swiper{ display: block; height: 100vh; border: none; overflow: auto;}
iframe {
position: absolute;
display: block;
width: 100%;
height: 100%;
border: none;
overflow: auto;
}
JavaScript to Swip(It Works):
$(function() {
//Enable swiping...
$("#swiper").swipe( {
//Generic swipe handler for all directions
swipeLeft:function(event, direction, distance, duration, fingerCount) {
slideMove($(".right")[0]);
},
swipeRight:function(event, direction, distance, duration, fingerCount) {
slideMove($(".left")[0]);
},
//Default is 75px, set to 0 for demo so any distance triggers swipe
threshold:0
});
});
What happening is: the swipe move only works in a little space in top of my page(where the swiper div begin), but when i inspect the div element in my browser, it is showing in full page. Why it dont's work when i slide in others parts of this element?
Thx a lot!!!

Increase width of divs, displayed side by side, using draggable events

I have two divs of fixed length as of now, which loads external URL by dynamically embedding iframes inside them. Divs are appearing next to each other - one on left and other right.
As of now, I have fixed their width to 50% each. But, I want to give user a flexibility to increase the width of any div to view the URL inside easily without scrolling horizontally. Something like dragging the border separating the two divs to either left or right according to his need.
Is there a way I could achieve this? Please suggest any library or something.
I have gone through a library twentytwenty which is used for images. I don't know how will that work for dynamic iframes.
Here is the JSFiddle which displays the divs.
<div>
<div id="originalPage" style="width:54%;height: 730px;float:left">
<p>one div </p>
</div>
<div id="diffReport" style="width:45%; height: 730px;float:right">
<p>another div</p>
</div>
</div>
There is a awesome jQuery plugin, go with jQuery Splitter here:
http://jquery.jcubic.pl/splitter.php
<div>
<div class="resizable" id="originalPage" style="width:54%;height: 730px;float:left">
<p>one div </p>
</div>
<div class="resizable" id="diffReport" style="width:45%; height: 730px;float:right">
<p>another div</p>
</div>
</div>
$(function() {$( ".resizable" ).resizable({animate: true,animateEasing:'swing',imateDuration: 500
});});
#diffReport, #originalPage{
border: 1px solid;
}
.ui-resizable-helper { border: 1px dotted gray; }
.resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid gray; overflow: hidden; position: relative; }
#diffReport { width: 100%; height: 100%; }
#originalPage { width: 100%; height: 100%; }
Use jQuery UI library in order to do resizing/dragging.
HTML
<div id="demo"></div>
Script
<script>
$(function(){$('#demo').draggable().resizable();});
$('#demo')
.resizable({
start: function(e, ui) {
alert('resizing started');
},
resize: function(e, ui) {
},
stop: function(e, ui) {
alert('resizing stopped');
}
});
</script>
Fiddle is
http://jsfiddle.net/VuqbN/
Updated your fiddle
http://jsfiddle.net/vw9qt/1/
var isDragging = false
var lastPageX = null
Make a new div in the middle of the existing ones.
Attach an event listener to mousedown on that div.
set isDragging to true and lastPageX to event.pageX
Attach an event listener to mousemove on the enclosing div.
only run if isDragging
var diff event.pageX - lastPageX
add diff to the left resizable div
remove diff from the right resizable div
set lastPageX to event.pageX
Attach an event listener to mouseup on the document
set isDragging to false

Basic jquery mouseover animation

Hi how may I make a simple mouse over animation to this logo?
What I want is the id logo may come down 300px and inside I will put my links as navigation
<body>
<div class="content">
<div id="logo"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Google-Wallet-logo.svg/283px-Google-Wallet-logo.svg.png" alt="" /></div>
<h1 class="title">Hello Moto</h1>
</div>
</body>
FIDDLE
Use mouseenter and leave
A working example Fiddle where I move the text around on hover: http://jsfiddle.net/hzbRb/1/
$('#logo').mouseenter(function(){
$('.content > h1').css('marginTop','30px')
}).mouseleave(function(){
$('.content > h1').css('marginTop','0px')
});
modify this CSS
#logo {
background: #f8b133;
width: 200px;
height: 200px;
max-height: 500px !important; // this is critical!!
margin: 0 auto;
z-index: 1;
}
jQuery
$("#logo").on('mouseover', function () {
$("#logo").animate({
opacity: 0.95,
height: "+=300"
}, 250, function () {
// Animation complete.
// Show Navigation
});
});
$("#logo").on('mouseleave',function () {
// Hide Navigation
$("#logo").animate({
opacity: 1,
height : "-=300"
}, 250, function() {
});
});
I gave it a little opacity so your navigations might show up a bit better and you'll notice I use the .one() delegation so it doesn't continue to move down every time you mouseover.
AFTER EDIT Animations will run a bit faster now and you'll have the ability to hover and leave as many times as is needed rather than being limited to once, as long as you change the CSS.
working jsFiddle

JavaScript drag-and-drop proxy

I want to enable drag-and-drop behaviour on my Web application. I have an image I want to drag. The image is behind another one that has transparent sections so that you can see the image beneath it. I do not want to change the order of the images. My thinking is I should use another layer on top of both images that is transparent and use it as a proxy to transfer events to the image I want to drag. jQuery UI's draggable function will not allow me to transfer the events in real-time i.e. I cannot hook into what it is doing while the drag is taking place, only when it is completed.
Is there a JavaScript library or jQuery plugin that will allow me to enable drag-and-drop on an element and have it transfer those events to another element in real-time?
Maybe I don't understand what you are trying to accomplish, but you should be able to drag and drop overlapping images without any trouble (demo).
Just wrap both images in a div and then make the div draggable:
CSS (no need to make .dragme position relative, because it is done in the draggable script)
.dragme img {
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="dragme">
<img src="image1.gif">
<img src="image2.gif">
</div>
Script
$(".dragme").draggable();
I updated the demo, this isn't pretty and there might be a better way, but basically this puts an invisible overlay over the frame, then positions the image while the overlay is being dragged.
CSS
#draggable, #droppable {
width: 450px;
height: 250px;
padding: 0.5em;
margin: 10px;
background: #ddd;
color:#000;
}
.dragme {
position: relative;
width: 100px;
padding: 5px;
}
.dragme img {
position: absolute;
top: 55px;
left: 30px;
}
.demo {
width: 500px;
}
.border {
position: absolute;
top: 75px;
left: 30px;
z-index: 1;
}
HTML
<div class="demo">
<div class="border">
<img src="http://www.imageuploading.net/image/thumbs/large/border-564.png">
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme">
<img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
</div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script (The demo uses $(document).ready because jsFiddle doesn't like $(window).load)
$(window).load(function(){
// cycle through draggable divs (in case there are more than one)
$(".dragme").each(function(){
var img = $(this).find('img');
var pos = img.position();
// create div overlay on image
$('<div/>', {
class : 'overlay',
css: {
position: 'relative',
top: pos.top,
left: pos.left,
width: img.outerWidth(),
height: img.outerHeight(),
zIndex: 100
}
})
// save original image position
.data('pos', [pos.left, pos.top])
.appendTo($(this));
// make overlay draggable
$(this).find('.overlay').draggable({
containment : '.demo',
revert: true,
revertDuration: 0,
handle: 'div',
// drag overlay and image
drag: function(e,ui){
img = $(this).parent().find('img');
img.css({
top: ui.position.top,
left: ui.position.left
});
},
// make image revert
stop: function(e,ui){
pos = $(this).data('pos');
$(this).parent().find('img').animate({left: pos[0], top: pos[1] },500);
}
});
});
$("#droppable").droppable({
drop : function(e,ui) {
// append entire div wrapper (.dragme)
ui.helper.parent().appendTo($(this));
}
});
});

Categories

Resources