We Keep Coding

Scrolling link text on hover - endless marquee effect

I'm looking for a performant and also smooth solution for links that scroll their text inside of their inline-block box like a marquee effect.
$(document).ready(function() {
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
My solution so far is something I actually found here on stackoverlow in another thread and tried to work with it.
Two problems though.
1.) As this is basically using an interval to loop through the single letters this effect is not very smooth. The effect is stuttering.
Has anyone an Idea on how to make this more smooth? Maybe in that case don't use this method at all and maybe use a CSS transition to animate the text?
2.) Does anyone have a clever solution on how to return to the initial state once I hover off? I want the effect on hover but when moving the mouse off the link it should animate back to the initial text state.
Thanks,
Matt

2) You can save initial state and then just revert it:
$(document).ready(function() {
function scroll(ele){
var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
$(ele).text(s);
}
scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
$(e).data("text", $(e).text());
scrollInterval = setInterval(function(){
scroll(e)
},100);
}
}
function stopScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
$(e).text($(e).data("text"));
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
1) As a smooth animation, i thought of this as a PoC. Maybe it will help you with further ideas.
$(document).ready(function() {
// Those global data could be stored in element's data.
var indent = 0,
width = 0,
padding = 10;
function scroll(ele){
// Every iteration decrease indent by value
indent -= 1;
// If is indent greater than or equal than real width
// (width with padding) reset indent.
if(-indent >= width+padding)
indent = 0;
// Aplly property
$(ele).css("text-indent", indent);
}
var scrollInterval = null;
function startScrolling(e) {
if (!scrollInterval) {
// Get text and real width
let text = $(e).text();
width = $(e).width()
$(e)
// Set real width & height, so that container stays
.width($(e).width())
.height($(e).height())
// Save text to data for reset
.data("text", text)
// Add 2 spans with text:
// <span>text</span><span>text</span>
// Where second span has defined padding on the left
.html($("<span>").text(text))
.append($("<span>").text(text).css("padding-left", padding+"px"));
resumeScrolling(e);
}
}
function stopScrolling(e) {
pauseScrolling(e);
// Reset
$(e)
// Revert real text and reset indent
.text($(e).data("text"))
.css("text-indent", indent = 0);
}
function pauseScrolling(e) {
clearInterval(scrollInterval);
scrollInterval = null;
}
function resumeScrolling(e) {
if (!scrollInterval) {
// Every 30ms repeat animation. It must be at least 25x per second
// so it runs smoothly. (So 1 - 40).
scrollInterval = setInterval(function(){
scroll(e)
},30);
}
}
$(".mali").hover(function(){
startScrolling($(this));
});
$(".mali").mouseout(function(){
stopScrolling($(this));
});
$(".mali").mousedown(function(){
stopScrolling($(this));
});
$("#start").click(function(){
startScrolling($(".mali"));
});
$("#stop").click(function(){
stopScrolling($(".mali"));
});
$("#pause").click(function(){
pauseScrolling($(".mali"));
});
$("#resume").click(function(){
resumeScrolling($(".mali"));
});
});
.mali {
display: inline-block;
background: black;
color: white;
padding: 10px;
/*
This could help, but you can't reset text-indent without animation.
transition: all .1s;
*/
overflow: hidden;
vertical-align: middle;
}
/* When you hover element, new span elements
can't take pointer events, so your elements
stays hovered. */
.mali span {
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Something something darkside, Something something complete.
<br><br>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
Idea behind this is:
make element overflow:hidden; so no text will overflow
set fix dimension
duplicate text inside
change text indent every x miliseconds (x < 40 so it is smooth, must be at least 25fps)
when it overflows, reset it so it can be in infinite loop

How can I disable(not hide) the scrolling vertical bar on scrolling with paralax effect

I want to try the same effect of this site but am getting lost in action on how to implement this animation.
When the user starts scrolling, the images in the header zoom in, the scrolling tab(vertical) does not move, up to a point which another image shows up, and only afterward the scroll bar starts working.
How can I achieve this animation when scrolling?
At the moment, what I thought was: to get the pixel value of the DOM when am scrolling, as well as the height of the div I want to target.
While the value of the DOM is less than the height of the box, the scale value should change based on the scrolling value.
The JS looks like this:
<script>
$(window).scroll(function() {
var initial_scroll = $('html').scrollTop();
var firstbox_height = $('#firstbox').height();
// console.log(firstbox_height);
while(initial_scroll < firstbox_height){
var sum = firstbox_height + ((firstbox_height * 0.01) / 100);
$('img').css({
// "transform": "scale(" + sum + ")"
});
}
});
</script>
I seem to be going into an infinite loop.
My pen is here

Here's a working sample. It's not flawless, it bugs when you scroll just a little back and forth at the top, the text size might change in the wrong direction. Also it doesn't work when scrolling with arrow keys. But what it does is that it should give you the idea on how to proceed.
There's probably a cleaner, nicer and more concise way to do this, but this is one way.
To get a perfectly working one, I think you might have to place a transparent <div> over the one that changes, just to keep track of the position and hence the direction.
Fiddle here: https://jsfiddle.net/codesam/nedj3ubx/53/
HTML:
<body>
<div id="box">
Text
</div>
<p id="direction">
</p>
</body>
CSS:
body {
height: 200vh;
}
#box {
width: 100%;
height: 50vh;
background-color: black;
color: white;
font-size: 72px;
}
jQuery:
$(document).ready(function(){
var initialScroll = -1;
var size;
$(window).on('scroll touchmove mousewheel', function(e){
var currentScroll = $(window).scrollTop();
if (currentScroll > initialScroll) {
$("#direction").text("down");
size = parseInt($("#box").css("font-size"));
if (size > 10) {
$("#box").css("font-size", "-=2");
e.preventDefault();
e.stopPropagation();
return false;
}
}
else if (currentScroll < initialScroll) {
$("#direction").text("up");
}
else if (currentScroll == 0 && initialScroll == 0) {
size = parseInt($("#box").css("font-size"));
if (size < 72) {
$("#box").css("font-size", "+=2");
e.preventDefault();
e.stopPropagation();
return false;
}
}
initialScroll = currentScroll;
});
});

Zoom inside of a div, changing the inner elements but not the div itself

I am looking for a way to zoom into a div element. Since this question did not provide some code example, I decided to post the following.
This jsfiddle already helped, but as you can see in my adapted jsfiddle, the whole div scales. I just want the image inside to scale. the div should have an overflow if zoomed in (also scroll bars).
Is this possible without including other scripts e.g. panzoom?
HTML
<div id="pane">
<img src="http://i.stack.imgur.com/oURrw.png">
</div>
JavaScript
$('#pane').bind('mousewheel DOMMouseScroll', function(e){
var stage = $(this);
scaleData = getZoom(stage);
if ( e.originalEvent.detail < 0 ){
setZoom( scaleData.curScale * '.9', stage );
}
else{
setZoom( scaleData.curScale * '1.1', stage );
}
});
function setZoom(scale, el){
scale = Math.round(scale*10)/10;
el.attr({
style:
'zoom: '+scale+';'+
'-webkit-transform: scale('+scale+');'+
'-moz-transform: scale('+scale+');'+
'-o-transform: scale('+scale+');'+
'-ms-transform: scale('+scale+');'+
'transform: scale('+scale+');'
});
}
function getZoom(el){
var curZoom = el.css('zoom');
var curScale = el.css('transform') ||
el.css('-webkit-transform') ||
el.css('-moz-transform') ||
el.css('-o-transform') ||
el.css('-ms-transform');
if ( curScale === 'none' ){
curScale = 1;
}else{
//Parse retarded matrix string into array of values
var scaleArray = $.parseJSON(curScale.replace(/^\w+\(/,"[").replace(/\)$/,"]"));
//We only need one of the two scaling components as we are always scaling evenly across both axes
curScale = scaleArray[0];
}
return { curZoom: curZoom, curScale: curScale };
}
CSS
div#pane{
height: 20em;
margin: auto;
background-color: #ffffff;
overflow: scroll;
position: relative;
z-index: 0;
}
Thank you

If I understand correctly the solution is to change the 2nd line of the JS you provided in a JSFiddle to:
var stage = $(this).find('img');
I just included .find('img') to the end of what you had there. Previously you were zooming the entire div, now it zooms just the img tag.

Change Image's Position based on scrollTop

I have a back to top image that popups when the user scrolls beyond 280. The issue is when you reach the bottom the image is over links in the footer. So I want to change the position of the image once the user is about 90px from the very bottom of the page - I want "bottom": '35px' to be 95. The page height is always changing fyi. Code I have:
function update() {
if ($(window).scrollTop() > 280) {
$('#btt').animate({
"bottom": '35px'
}, 300);
}
else {
$('#btt').animate({
"bottom": '-80px'
}, 300);
}
}
setInterval(update, 500);

It might be better to check for the scroll position only when the page has been scrolled rather than just checking every 1/2 second.
I've put together a working demo of what I think you want here: http://jsfiddle.net/swpqpv4r/5/
Basically we need to look at the scroll position of the bottom of the window as we scroll instead of the top by using document.body.scrollTop + $(win).height(). Normaly we might want to worry about what could happen if the window were to be resized, but we calculate this each time inside of the scroll event, so it shouldn't be an issue if the window changes sizes.
Next we need to know when the top of the footer has scrolled above the bottom of the window. We can use $("#footer").position().top; to see where it's top position is.
Hopefully the code is commented enough to help explain it. Let me know if you have any questions.
HTML
<header>Top</header>
<br><br><br> <!-- Lots of these for testing -->
<footer id="footer">Bottom</footer>
<a id="btt" href="javascript:{};">Back to top</a>
JavaScript
$(function(){
//select once and re-use later
var $win = $(window);
var $btt = $("#btt");
var $foot = $("#footer");
var bttDisplay = 500;
var footerHeight = $foot.outerHeight();
var footerTop = $foot.position().top;
function updateScroll() {
var scrollBottom = document.body.scrollTop + $win.height();
if (scrollBottom >= bttDisplay && scrollBottom <= footerTop) {
//show it by setting the bottom position to 0
animateBtt(0);
}else if (scrollBottom >= footerTop) {
//move it up above the footer's top position
animateBtt(footerHeight);
}else {
//hide it by setting the bottom position to the negative value of it's height
animateBtt($btt.height() * -1);
}
}
function animateBtt(pos){
$btt.animate({
"bottom": pos
}, 300);
}
//run initially
updateScroll();
//Create a var to hold the timer
var scrollTimer = null;
$win.on("scroll",function(ev){
//when scrolling, clear the timer
clearTimeout(scrollTimer);
//Now set the timer to run a function after a small delay.
//This prevents the update from happening too many times when you scroll
scrollTimer = setTimeout(updateScroll, 50);
});
//click to scroll back up
$btt.on("click",function(){
$('html, body').animate({scrollTop:0},300);
})
});
CSS
html,body{
margin:0;
padding:0;
}
header, footer{
background: #CCC;
padding: 10px;
}
#btt{
position:fixed;
height: 30px;
width: 100px;
text-align:center;
bottom: -30px;
right:0;
background: #F00;
color: #FFF;
z-index: 1000;
}

Jquery - move element left or right with condition

Hello everyone I explain my problem,
I created a master container 500px wide and 100px high (with overflow hidden) ...
inside a container 2 of various boxes, always 500px 100px, ill' insert a number of boxes 100px X 100px, plus two control buttons to move the container to the right or left of 100px.
The boxes are visible 5, for example, if there are 8 I would like to click the button 'right' container 2 would shift 100px but when they get to the last block (in this example is 8) button to go to right must disable.
Conversely, if we start the button to the left to Go must be disabled until the right has done at least one move.
Also as you can see at the click when I move the elements contained in the box it disappear during movement and this thing is no good, various box must move but always remain visible.
On JSfiddle I created a demo, I can not create the right conditions, you have a solution? thanks
enter link description here
$( "#right" ).click(function() {
$( "#block" ).animate({ "left": "+=105px" }, "slow" );
});
$( "#left" ).click(function(){
$( "#block" ).animate({ "left": "-=105px" }, "slow" );
});
.cont{
width:530px;
height:100px;
position:absolute;
background:#000;
overflow:hidden;
}
.box-cont{
width:auto;
height:100px;
position:absolute;
background:yellow;
}
.box{
width:100px;
height:100px;
position:relative;
float:left;
margin-left:5px;
background:#F00;
text-align:center;
font-size:32px;
}
.btn{
position:absolute;
left:0px;
top:120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cont">
<div class="box-cont" id="block">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
</div>
<div class="btn">
<button id="left">«</button>
<button id="right">»</button>
</div>

You could use something like this:
<script>
var totalBlocks = $('#block div.box').length;
var blockViews = Math.round($('#block').width() / $('#block div.box').width());
var currentPosition = 0;
$( "#right" ).click(function() {
if(currentPosition > 0)
{
$( "#block" ).animate({ "left": "+=105px" }, "slow" );
currentPosition--;
}
});
$( "#left" ).click(function(){
if(blockViews + (currentPosition+1) <= totalBlocks)
{
$( "#block" ).animate({ "left": "-=105px" }, "slow" );
currentPosition++;
}
});
</script>

Take a look at this, does this help? you can drag and move the elements themselves, and put left and right thresholds on them. I was trying to mimic google gmail swipe
http://jsfiddle.net/williamhowley/o9uvo50y/
$('ul#main > li')
.on('movestart', function (e) {
console.log("move start");
// var $li = $(e.target).closest('.swipable'); // this would be normal live integration
var $li = $(e.target);
if ($li.attr("data-hasplaceholder") !== "true") { // if it does not have a placeholder, add one.
createBackgroundSpacer($li);
$li.attr("data-hasplaceholder", true); // signify that a placeholder has been created for this element already.
}
// If the movestart heads off in a upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) ||
(e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
return;
}
// To allow the slide to keep step with the finger,
// temporarily disable transitions.
wrap.addClass('notransition'); // add this to the container wrapper.
})
.on('move', function (e) {
// event definitions
// startX : 184, where from left the mouse curser started.
// deltaX: ?
// distX: how far the mouse has moved, if negative moving left. Still need to account for double movement, currently can only handle one movement.
console.log("move");
console.log(e);
var maxLeft = $('.rightContent').width();
var marginLeftNum = Number($(this).css('margin-left').replace(/[^-\d\.]/g, ''));
if (marginLeftNum <= -maxLeft && e.deltaX < 0) { // Case when user is at outermost left threshold, and trying to move farther left.
$(this).css({ 'margin-left': -maxLeft });
}
else if (marginLeftNum == -maxLeft && e.deltaX > 0) { // When user is at threshold, and trying to move back right.
$(this).css({ 'margin-left': marginLeftNum + e.deltaX });
}
else if (e.target.offsetLeft>=0 && e.deltaX>0) { // If the offset is 0 or more, and the user is scrolling right (which is a positive delta, than limit the element. )
$(this).css({ 'margin-left': 0 });
}
// Must have a Negative offset, and e.deltaX is Negative so it is moving left.
else if (e.deltaX < 0) { // Case when element is at 0, and mouse movement is going left.
$(this).css({ 'margin-left': marginLeftNum + e.deltaX });
}
else { // Moving Right when not on 0
$(this).css({ 'margin-left': marginLeftNum + e.deltaX });
}
})
.on('swipeleft', function (e) {
console.log("swipeleft");
})
.on('activate', function (e) {
// not seeing this activate go off, i think this is custom function we can add on if swipe left hits a threshold or something.
console.log("activate");
})
.on('moveend', function (e) {
console.log("move end");
wrap.removeClass('notransition');
});