I've searched everywhere but couldn't find anything that suited to me.
I would like to do something like on this site:
http://fromtheroughmovie.com
I've looked into the js (800kb!), and from what I could see, it's using scrollTo to stealthily scroll towards elements depending on mouse position.
The closest script I could find was this : http://scripterlative.com/files/cursordivscroll.htm
But it scrolls only when towards the edges (I hacked it to try with a superior size but it stutters with Chrome).
Does anyone know how to do a complete mouse scroll (div is 4000px large, with 6 big divs positionned as absolute)? I tried a lot of things but this leads to nowhere for now.
If more information is needed, just ask.
Thanks in advance.
Have you looked at this plugin?
http://demos.flesler.com/jquery/scrollTo/
It's a pretty adaptable plugin with lots of scrolling functionality. It uses a function called 'scrollTo' which is maybe what you saw in that site's code?
In your example code from scripterlative, you can adjust the scroll area to be from just around the edges. The example is set to 20% boundary:
new CursorDivScroll( 'userComment', 20, 10 );
You can change the second param to be 50 and see if that helps.
As for the original site you need to tidy the javascript up to see how it all works. The page content is loaded via AJAX. Search for function runTransition(page). This pulls in the 'home' page, after the intro. This content contains a more useful bit of javascript: http://www.fromtheroughmovie.com/js/main-home.js
From there, you can see how the cast images are scrolled:
<div id="home-mosaic">
<ul>
<li id="cast-image1">...</li>
<ul>
</div>
The javascript that does the hard work seems to be a jQuery animate:
$("#home-mosaic > ul > li").mouseenter(function() {
$(this).find("div.home-mosaic-separation").animate({'width': (currentWidth*0.20) + 'px', 'left': (currentWidth*0.40) + 'px'}, 400);
});
$("#home-mosaic > ul > li").mouseleave(function() {
$(this).find("div.home-mosaic-separation").css({'width': (currentWidth*0.02) + 'px', 'left': (currentWidth*0.49) + 'px'});
});
Hope that helps!
Related
We have been looking for a while now but still haven't found the solution to this matter.
We are designing the site in wordpress
URL: http://jouwdesign.be/fontanella/site/lunchmenu/
The golden menu (.submenu) has a script linked to it wich should add the class 'test' when scrolling vertically past 100 pixels. For some reason it wouldn't even display a classchange when inspecting in chrome or any other browser. We already tried to disable all custom js and plugins but no luck so far.
Here is the jQuery:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() >= 100) {
$(".submenu").addClass("test");
}
});
});
Anyone who has experienced the same problem in wordpress or any other ways?
Thanks!
Found the solution. I had to remove 'height 100%' on my body tag in css
All works fine now!
I know this topic has been posted quite often already, but none of the solutions presented have been of any help to me by far. I have a sidebar on the left side of my page, which I assigned position:fixed in CSS, and which I would like to scroll horizontally (along with all the other content on my page)
For my header and footer I solved the issue like this:
$(window).scroll(function ()
{
$("header,footer").css('margin-left', -($(window).scrollLeft()) + "px");
});
But this doesn't do it properly for my sidebar.
This is the html for my sidebar:
<div class="fullscreen_block hided">
<div class="left-sidebar-block">
and CSS:
.left-sidebar-block {
position: fixed;
margin-left: 70px;
}
Can anybody show me how I can fix this without using the above JS code? (any other JS or CSS or jQuery is fine)
Thanks!!
First off, I think you want to use scrollTop instead of scrollLeft. From your description, it sounds like you want to have an element slide to the left as the user scrolls down. scrollTop will give you the distance the user has scrolled.
Second, I recommend using the transform property instead of the margin property, as long as it meets your browser support requirements. Scrolling tricks are often performance intensive so you should try to use high performance css properties like transform and opacity rather than slower properties like margin, left, and display.
The following code does what I think you are trying to do. (Codepen demo: http://codepen.io/regdoug/pen/yyYvaV):
$(window).scroll(function ()
{
var top = $(window).scrollTop();
$("left-sidebar-block").css('transform', 'translateX(' + (-top) + "px)")
.css('-ms-transform', 'translateX(' + (-top) + "px)")
.css('-webkit-transform', 'translateX(' + (-top) + "px)");
});
References
http://www.html5rocks.com/en/tutorials/speed/scrolling/
http://css-tricks.com/almanac/properties/t/transform/
http://caniuse.com/#feat=transforms2d
Your problem is not really clear.. but I think you shoukd better play with the "left" attribute rather than "margin-left". Margins won't have any effect on a fixed element..
Hope you are all well.
I am trying to create my own video gallery using html, CSS, and Javascript.
My idea is that there are thumbnails that are hyperlinks that when clicked, scroll to the top and plays a youtube video in an iframe.
So far i have managed to get both the scroll to top and changing the iframe source to work individually. But, annoyingly, they do not seem to work when they are together.
Could anybody give me tips on the best way of achieving my goal?
Here is the jsfiddle of the 'changing iframe source' code working: jsfiddle.net/2SH97/ (This has the design of the page and what it'll look like at the end)
Here is the jsfiddle of the 'scroll to top' code: jsfiddle.net/RpPEe/229/ (a short version of the scroll to top with my attempt to change iframe source)
Thanks in advance.
Best,
function scrollt(){
$("body").animate({
scrollTop: 0
}, 600);
}
$("[target='projectsiframe']").on('click',function () {
$("#ifr").attr('src',$(this).attr('href'));
scrollt();
});
DEMO
http://jsfiddle.net/2SH97/3/
The problem is that I have an image larger than 477 x 205, but i'll need them for another things, it would be a problem to make 2 or 3 images with diferent sizes. So, I decided to resize it on jquery. The major problem is that i'm new on JQUERY ( please, be patient :B ).
I've read some of the topics, but none helped me, the one that got closer was to add "$('#slides').css('background-size', '477px 205px');":
$(document).ready(function() {
$('#slides').coinslider({ hoverPause: true });
$('#slides').css('background-size', '477px 205px');
$('#slides').css('overflow', 'hidden');
});
but, that didn't solve it, also, it starts at the right size, but when the slider starts looping, it gets a mess again
Change this:
$('#slides').css('background-size', '477px 205px');
To this:
$('#slides').width(477).height(205);
The overflow: hidden will hide the rest of the image.
More relevant code would be helpful in providing better guidance. Have you considered "background-size: cover" yet?
Reference 1,
Reference 2
After 1 week without the solution, i've reached on what I was making mistakes, i was o the .js, when the Js loads, he create his own CSS for the slider, so I had to add the "background-size: size" on it like this:
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop,
'background-size':'477px 205px'
});
as it wasn't fixed a size to it, it would take the real size of the image as default.
Thank you for trying to help me with this issue!
So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.
How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
How do I get the block to slide back to the original position instead of just kind of 'transporting' there?
I am only beginner at jQuery so any help would be amazing.Thanks.
As for the positioning problem: you need to drop the left declaration in your second function.
Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:
function() {
var position = $.data(this, 'position');
var ind = $(this).index();
//moves image back to original position
$('#container div').each(
function() {
$(this).animate({
right: "",
width: 100
});
});
});
Working example here.
I see you have a response.
In case this version is of any help to you:
http://jsfiddle.net/vCbcz/
Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.
$('#slider').animate({
marginLeft: '-' + ind * 105 + 'px'
});
and back
$('#slider').animate({
marginLeft: 0 + 'px'
});
There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.
Live Demo http://jsfiddle.net/Jaybles/WEzny/