How to scroll diagonally with jQuery or Javascript - javascript

Are there projects or plugins that utilize javascript or jQuery to scroll diagonally?
e.g. when you scroll down your content, It would be pulled at the top-left corner of the browser; and when you scroll up your content would be pulled at the bottom-right of the corner.
I see some similar project/website that they animate their elements when scroll. Most of the site that use javascript has some lags with the effect though. Another i've seen is using html5 + parallax effect similar to "Nike a Better World" (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)
Can you point me where can be a good starting point? Basically I want to scroll the items diagonally left-or-right. If this can be done plainly in HTML5, I would highly consider that since I feel It would have less lag or less calculation being done.

I was able to create the effect that you wanted in a fiddle:
http://jsfiddle.net/t0nyh0/8QTYt/36/
Important Tidbits
A "fixed" full-width and full-height wrapper that holds all your moving elements help you animate the div more consistently based on the scroll position (which is effectively the "keyframe" number).
scroll_max, wrapper_width, and wrapper_height helps normalize the dimensions of wrapper. I.e. the very bottom of the scroll corresponds to the bottom/right of the wrapper, and the very top of the scroll corresponds with the top/left of the wrapper.
Set your body's height to whatever number of "keyframes" that you want.
To move from top left to bottom right on going down, adjust the top and left properties. For the reverse, adjust the bottom and right properties. Of course, you will need to formulate your own calculations for more complex animations, but know that doing $window.scrollTop() will give you the "keyframe" number.
HTML
<div id="wrapper">
<div id="a">
<h1>Meats</h1>
</div>
<div id="b">
<h1>Veggies</h1>
<hr/>
<p>Veggies sunt bona vobis, proinde vos postulo esse magis daikon epazote peanut chickpea bamboo shoot rutabaga maize radish broccoli rabe lotus root kohlrabi napa cabbage courgette mustard squash mung bean.</p>
</div>
</div>​
CSS
body
{
height: 1000px; // 1000 keyframes
}
#wrapper
{
width: 100%;
height: 100%;
position: fixed;
border: 2px solid navy;
overflow:hidden;
}
#a {
position:absolute;
background-color: #daf1d7;
width: 300px;
height: 300px;
}
#b
{
position: absolute;
background-color: #d2d0ee;
width: 200px;
height: 200px;
bottom: 0px;
right: 0px;
}
​
Javscript
var $window = $(window);
var $a = $('#a');
var $b = $('#b');
var scroll_max = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var wrapper_height = $('#wrapper').height();
var wrapper_width = $('#wrapper').width();
$window.scroll(function() {
console.log(scroll_max);
$a.css({
'top': ($window.scrollTop() / scroll_max) * wrapper_height,
'left': ($window.scrollTop() / scroll_max) * wrapper_width
});
$b.css({
'bottom': ($window.scrollTop() / scroll_max) * wrapper_height,
'right': ($window.scrollTop() / scroll_max) * wrapper_width
});
});​

Here's a potential solution for you (jsFiddle example):
jQuery:
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#a').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
$('#b').css({
'width': 300-$(this).scrollTop(),
'height': 300-$(this).scrollTop()
});
});
CSS:
#a,#b {
position:fixed;
background: orange;
}
#a{
top:0;
left:0;
}
#b {
bottom:0;
right:0;
width:300px;
height:300px;
}
body {
height:2000px;
}
HTML:
<div id="a"></div>
<div id="b"></div>

Related

centering a div in a container larger than 100%

i need to center a div in the viewport in a container larger then 100%.
assuming it's 160% large, i prepared this fiddle:
https://jsfiddle.net/mz0bbz14/2/
usually i would go for:
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
but this works only when its container is 100% large.
it's solved with this css
position:absolute;
top:50%;
text-align: center;
transform:translate(0,-50%);
width: 100vw;
but the vw unit doesn't work on older android browsers and i need to support it. I can't use jQuery and i don't know how to center it with pure javascript.
i tried setting .div to half the width of the container, but the text inside the div doesn't visually center.
i can't find a solution. any ideas? thanks
If I understand your problem correctly, you want the red .div centered in the left 100% of the parent container that has a width of 160% of the view port.
In that case, you need to adjust the left offset to be 50% of 100%/160%, which is 31.25%.
body,html {
height: 100%;
}
.cont-inner {
width:160%;
height: 100%;
background: hotpink;
position:relative;
}
.div {
position:absolute;
top:50%;
left: 31.25%;
transform:translate(-50%,-50%);
background:red;
padding:50px; /* smaller size for demo in snippet window */
}
<div class="cont-inner">
<div class="div">
asd
</div>
</div>
You need to change the left property.
It needs to be in the middle of the visible part of the container.
Since it's 160%, it is
(100 / 160) * 0.5 -> 31.25%
body,html {
height: 100%;
}
.cont-inner {
width:160%;
height: 100%;
background: hotpink;
position:relative;
}
.div {
position:absolute;
top:50%;
left:31.25%;
transform:translate(-50%,-50%);
background:red;
padding:100px;
}
<div class="cont-inner">
<div class="div">
asd
</div>
</div>
;
I wanted to place an answer with modified left property, but I already see them, so here's some other attempt with position:static freeing inner div from its parent
https://jsfiddle.net/mz0bbz14/9/
It just doesn't force you to stick with 160%.
If you need to support older browsers you shall use Javascript to make sure it will work since all CSS solution require hard-coding values.
var parent = document.querySelector('.cont-inner'),
child = parent.querySelector('div');
child.style.left = ((window.innerWidth / 2) - (child.offsetWidth / 2)) + 'px';
child.style.top = ((window.innerHeight / 2) - (child.offsetHeight / 2)) + 'px';
Example: https://jsfiddle.net/9syvq2r2/

smooth horizontal scroll like k2.pl

I am trying to build a website with a horizontal scroll like this website k2.pl
Desc
i have made this code so far jquery animate and scroll to
// i am getting y and x axis and moving the whole page agains it
$('.scroll').animate( { scrollLeft: '+='+newScroll }
but what i made is that my script gets page X axis of website and move againts it but what i want is that when i hover on an element on the site it should scroll to the center like on this site k2.pl
can you guys suggest me some jquery plugin or that tell me how can improve it
If you check the website and move the mouse, you'll see that the element that you hover on doesn't really go to the center, the movement of the scroll is associated to the horizontal movement of the mouse and has nothing to do with hovering over the different list elements.
The idea is simple:
Have a container that occupies the whole width of the window and that has a overflow:hidden.
Inside that container have a second container with the same width as the list of elements.
Inside that container have a list of elements (or a series of inline elements) that occupy more than the width of the window.
When the mouse moves over the container, calculate the position of the mouse within the window, and scroll the container horizontally accordingly.
A basic version of it would be like this:
$(document).ready(function() {
$(".scroll").on("mousemove", function(e) {
var ww = $(window).width(); // window width
var uw = $(".scroll ul").width(); // ul width
var mp = e.clientX; // mouse position
var ms = uw - ww; // max scroll
var sc = - ms * mp / ww; // amount to be scrolled
$(".scroll > div").stop().animate({ left: sc +"px" }, 600, "easeOutCirc");
});
});
html, body {
margin:0;
padding:0;
border:0;
}
div.scroll {
width:100%;
height:400px;
overflow:hidden;
background:#f0f0f0;
position:relative;
}
div.scroll > div {
width:1400px;
position:absolute;
top:0;
left:0;
}
div.scroll > div > ul {
width:1400px;
margin:0;
padding:0;
}
div.scroll > div > ul > li {
display:inline-block;
float:left;
width:200px;
height:400px;
opacity:0.7;
transition:all 0.5s;
}
div.scroll > div > ul > li:hover {
opacity:1;
background:#6699cc;
}
div.scroll > div > ul > li:hover > span {
color:white;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="scroll">
<div>
<ul>
<li><span>AAA</span></li>
<li><span>BBB</span></li>
<li><span>CCC</span></li>
<li><span>DDD</span></li>
<li><span>EEE</span></li>
<li><span>FFF</span></li>
<li><span>GGG</span></li>
</ul>
</div>
</div>
(Note: the code above may not work if the width of the window is larger than 1400px)
If you check the source code for k2.pl you'll see that they are using jQuery, jQuery UI, and Ariel Flesler's scrollTo plugin. You can see the code that controls the scrolling (in a different way to what I explained above) in the script.min.js file (search for mousemove.sapp).
As promised, here's my working solution. Alvaro's is great, but it uses the jQuery animate function which is a big no-no (it's about 10x slower than CSS transitions / the GSAP JavaScript animation library, for example), so I thought you might benefit from another implementation.
I personally like GSAP, which is super easy to pick up; that's why I've used it here. The rest is in native JS so you don't need all that library bloat:
var wrapper = document.getElementById("wrapper");
var tiles = document.getElementsByClassName("tile");
var tileWidth = tiles[0].getBoundingClientRect().width;
var containingWidth = tileWidth * tiles.length;
wrapper.addEventListener("mousemove", function(e){
var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);
TweenLite.to(wrapper, 1, { scrollLeft: pos, ease: Circ.easeOut })
});
html, body {
height: 100%;
overflow: hidden;
white-space: nowrap;
}
#wrapper {
height: 100%;
overflow-y: hidden;
overflow-x: auto;
}
.tile {
display: inline-block;
height: 100%;
width: 400px;
transition: background 0.2s ease-in-out;
}
.tile:hover {
background: transparent !important;
}
<div id="wrapper">
<div style="background: #6d8745" class="tile"></div>
<div style="background: #aa715a" class="tile"></div>
<div style="background: #a25fe3" class="tile"></div>
<div style="background: #8e84f5" class="tile"></div>
<div style="background: #259a5c" class="tile"></div>
<div style="background: #d5b67a" class="tile"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
The principles are essentially the same as Alvaro's. What you have to understand is that the width of the viewport will be a certain percentage of the width of the div / element which contains all of the "tiles" so, taking this into consideration, you have to calculate how to make them map at a 1:1 ratio. That calculation is represented by this line of code (the subtraction at the end is an offset):
var pos = (e.clientX / (wrapper.getBoundingClientRect().width)) * containingWidth - (tileWidth / 1.5);
Hope this helps!
Original codepen

I need the contents of an iframe to expand like an animation and fill up the entire screen and shrink to it original size

I need the contents of an iframe which has height of 100px(displays only part of iframe) to expand like an animation on read more button click,and fill up the entire screen(expands in all directions), and on clicking close button positioned on top of it, it needs to animate and shrink to it original size.
I found a fiddle that dooes something similar
http://jsfiddle.net/FP2DZ/.
But my issue is that my div cannot be absolutely positioned as I have contents underneath that and that gets affected if I make this one absolutely positioned.
Absolutely positioning rest of the contents also does not seem to me like a good solution
Code
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Probably the easiest way is to utilize the .animate({}) method in Jquery.
Check out this fiddle: http://jsfiddle.net/cm6v7bca/2/
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
.animate({}) allows you to change the css properties and then smoothly animates the changes onto the element. There are several different parameters you can pass. In the fiddle you'll see that I passed "1000" - that's the duration for the animation to complete in ms.
You can read more about the parameters and the method here: https://api.jquery.com/animate/
That really helps. But then the iframe needs to cover rest of the contents in the page and overlay them, Thats seems possible only if iframe is absolutely positioned. But there is so much dynamic content in the page, I do not want to absolute position the iframe.
http://jsfiddle.net/CvhkM/2833/
this is like what I want just that am not able to absolute position.
JS:
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);

Sticky Header - buggy jumping on scroll

I have a specific problem on making a sticky header with jQuery. I tried the commonly used snippets around the web, but I perceived the same buggy thing everywhere.
At a specific document height (scrollable until a little more than calling of sticky-effect) the sticky header jumps between position: fixed and position: static.
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
jQuery:
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS:
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
I also tried a margin-bottom on #not-sticky with the same height as the #sticky to keep a constant document-height, but the same jumpy-sticky-effect occurred.
Any idea to fix that thing?
Scroll fires too many times and trying to set an element style will always & inevitably create jumps (even barely noticeable but still jaggy).
The best way I've found is to
clone our element,
make that clone fixed
play with clone's visibility style.
Pure JS:
;(function(){ /* STICKY */
var sticky = document.getElementById("sticky"),
sticky2 = sticky.cloneNode(true);
sticky2.style.position = "fixed";
document.body.appendChild(sticky2);
function stickIt(){
sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
}
stickIt();
window.addEventListener("scroll", stickIt, false );
}());
#sticky{
height:100px;
background:#ada;
height:50px;
position:relative;
/* needed for clone: */
top:0;
width:100%;
}
/* Just for this demo: */
*{margin:0;padding:0;}
#content{height:2000px; border:3px dashed #444;}
h1{padding:40px; background:#888;}
<h1>Logo</h1>
<div id="sticky">Sticky header</div>
<div id="content">Lorem ipsum...<br>bla bla</div>
So when you see the "header" fix, that's actually our fixed clone getting visible on-top.

How to keep a floating div centered on window resize (jQuery/CSS)

Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized?
To help explain, I imagine the pseudocode would look something like:
div.left = 50% - (div.width / 2)
div.top = 50% - (div.height / 2)
UPDATE
My query having been answered below, I wanted to post the final outcome of my quest - a jQuery extension method allowing you to center any block element - hope it helps someone else too.
jQuery.fn.center = function() {
var container = $(window);
var top = -this.height() / 2;
var left = -this.width() / 2;
return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
}
Usage:
$('#mydiv').center();
This is easy to do with CSS if you have a fixed-size div:
.keepcentered {
position: absolute;
left: 50%; /* Start with top left in the center */
top: 50%;
width: 200px; /* The fixed width... */
height: 100px; /* ...and height */
margin-left: -100px; /* Shift over half the width */
margin-top: -50px; /* Shift up half the height */
border: 1px solid black; /* Just for demo */
}
The problem, of course, is that fixed-size elements aren't ideal.
The simplest way would be with the following CSS code:
#floating-div {
width: 50%;
border: 1px solid gray;
margin: 0 auto;
}
The key line of CSS code above is the "margin: 0 auto;" which tells the browser to automatically set the left/right margins to keep the div centered on the page, even when you resize the browser window.
Try this little article about Horizontal and Vertical centering. It is a little old and has a few hacks but you should be able to work out some test code from it.

Categories