fade 4 Alphabets of a Word and Retain one alphabet "H" - javascript

I am not able to fade the 4 alphabets "ello" from the word "Hello" when the word is zooming out.
What i need is, when i reach step number 6 and 7 from my below code, the texts "e" "l" "l" "o" should fade out, but only the alphabet "H" should go towards the left top corder
// 6. zooms out to 200% heading towards left top corner,
// 7. Fades out when reaching the logo
Js:
// 3. Page load completes - the text "hello",
// has come to center with zoom 800%
$("#hello").animate({
zoom: "800%",
left: window.innerWidth / 2
}, 3000, function() {
// 4. Pause for 3 seconds
$(this).delay(3000)
// 6. zooms out to 200% heading towards left top corner,
// (logo position)
// 7. Fades out when reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).fadeOut()
})
})
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">hello </h1>
</div>

Check the fiddle link: http://jsfiddle.net/cgLLhyyu/1/
<div id="hello">
<h1 style="zoom: 200%; transition: zoom 1s ease-in-out;">h<span>ello</span> </h1>
</div>
What you need to do is wrap the elements that need to be fade out inside a span. Rest of the code is good
$("#hello").animate({
zoom: "800%",
left: window.innerWidth / 2
}, 3000, function() {
// 4. Pause for 3 seconds
$(this).delay(3000)
// 6. zooms out to 200% heading towards left top corner,
// (logo position)
// 7. Fades out when reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).find('span').fadeOut(); //<--- change here
})
})

This should work:
$("#hello").animate({
zoom: "800%",
left: window.innerWidth / 2
}, 3000, function() {
$(this).find('span').fadeOut()
// 4. Pause for 3 seconds
$(this).delay(3000)
// 6. zooms out to 200% heading towards left top corner,
// (logo position)
// 7. Fades out when reaching the logo 8. Logo appears
.animate({
zoom: "200%",
left:0
}, 3000, function() {
$(this).fadeOut();
})
})
});
JsFiddle

Related

JS/GSAP solution for infinite animation

I am trying to create a infinite star rain animation, all stars are SVG's.
I tried this to create the animation:
(function($) {
TweenMax.set(".astar", {
x:function(i) {
return i * 50;
}
});
TweenMax.to(".astar", 5, {
ease: Linear.easeNone,
x: "+=500", //move each box 500px to right
modifiers: {
x: function(x) {
return x % 500; //force x value to be between 0 and 500 using modulus
}
},
repeat: -1
});
})(jQuery);
The repeat process is not smooth as you can see on this Codepen:
https://codepen.io/daniellwdb/pen/NXogoB
Is there any JS or GSAP solution to make the animation smooth so that it will look like stars keep spawning from the left and move to the right?
With your current setup, I think the easiest way to pull this off would be to duplicate your starfield so that the beginning of your next loop is identical to the end of your first one. Let's say this is your starfield SVG:
|...o.|
|o....|
|..o..|
Your new "duplicated" starfield would essentially be:
|...o.|...o.|
|o....|o....|
|..o..|..o..|
So when you move that duplicated image from left to right 100%, what you see in the last "frame" is identical to what it will return to when it loops.
Here's a fiddle that shows this concept in action: https://jsfiddle.net/yarp4oLs/5/
I have two identical starfield images that are 200x200 (so 400x200 when side-by-side) and they are displayed in a "viewport" container that is 200x200. Then I just slide them to the left 200px and repeat. Instant stars!

How do I make bootstrap button size (width * height) stay the same if value changes?

My goal is to change the button text to a spinner or to a div, but whenever the value changes the size of the button changes as well. How do I make the button fixed?
$(function() {
var opts = {
lines: 9 // The number of lines to draw
,
length: 2 // The length of each line
,
width: 2 // The line thickness
,
radius: 10 // The radius of the inner circle
,
scale: 1 // Scales overall size of the spinner
,
corners: 1 // Corner roundness (0..1)
,
color: '#FFFFFF' // #rgb or #rrggbb or array of colors
,
opacity: 0.25 // Opacity of the lines
,
rotate: 0 // The rotation offset
,
direction: 1 // 1: clockwise, -1: counterclockwise
,
speed: 1 // Rounds per second
,
trail: 60 // Afterglow percentage
,
fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
,
zIndex: 2e9 // The z-index (defaults to 2000000000)
,
className: 'spinner' // The CSS class to assign to the spinner
,
top: '50%' // Top position relative to parent
,
left: '50%' // Left position relative to parent
,
shadow: false // Whether to render a shadow
,
hwaccel: false // Whether to use hardware acceleration
,
position: 'absolute' // Element positioning
}
$("#apply").on("click", function() {
$("#apply").html(new Spinner(opts).spin().el);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter something">
<span class="input-group-btn">
<button class="btn btn-success" id="apply" type="button">Apply</button>
</span>
</div>
Fiddle link: https://jsfiddle.net/dq9b2xcw/1/
I would wrap the text in an element, and hide it visually using opacity, then either $.append() the spinner code (instead of using $.html()) to the button, or if you're going to toggle the state of the button back and forth so it will go from text to spinner and back, add an element for the spinner and add the spinner to that element instead.
Here's an example.
$(function() {
var opts = {
lines: 9 // The number of lines to draw
,
length: 2 // The length of each line
,
width: 2 // The line thickness
,
radius: 10 // The radius of the inner circle
,
scale: 1 // Scales overall size of the spinner
,
corners: 1 // Corner roundness (0..1)
,
color: '#FFFFFF' // #rgb or #rrggbb or array of colors
,
opacity: 0.25 // Opacity of the lines
,
rotate: 0 // The rotation offset
,
direction: 1 // 1: clockwise, -1: counterclockwise
,
speed: 1 // Rounds per second
,
trail: 60 // Afterglow percentage
,
fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
,
zIndex: 2e9 // The z-index (defaults to 2000000000)
,
className: 'spinner' // The CSS class to assign to the spinner
,
top: '50%' // Top position relative to parent
,
left: '50%' // Left position relative to parent
,
shadow: false // Whether to render a shadow
,
hwaccel: false // Whether to use hardware acceleration
,
position: 'absolute' // Element positioning
}
$("#apply").on("click", function() {
$("#apply").find('.text').addClass('invisible').end().find('.spinner').append(new Spinner(opts).spin().el);
});
});
.invisible {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter something">
<span class="input-group-btn">
<button class="btn btn-success" id="apply" type="button"><span class="text">Apply</span><span class="spinner"></span></button>
</span>
</div>
The button is collapsing because there is no text content in the button after it is replaced by a spinner. Try adding an invisible character to the button and see if that does the trick in this case:
$("#apply").html(new Spinner(opts).spin().el).append(' ');
That will maintain the height of single-line text If you want to maintain the width too, just store it off before swapping out the HTML.
var buttonWidth = $('#apply').css('width');
// ... swap html
$("#apply").css('width', buttonWidth);
The same could be applied to height as well if you wanted to be consistent.

Displaying Spinner until Mathjax loaded even with direct anchors URL

My issue is a little bit tricky. For the moment, I get to display a spinner until Mathjax equations are loaded in my HTML page. For this, I do :
<script type="text/javascript">
var targetSpin;
var targetHide;
$(document).ready(function() {
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};
targetSpin = document.body;
targetHide = document.getElementById('hide_page');
spinner = new Spinner(opts).spin(targetSpin);
});
</script>
<script type="text/x-mathjax-config">
//
// The document is hidden until MathJax is finished, then
// this function runs, making it visible again.
//
MathJax.Hub.Queue(function () {
spinner.stop();
targetHide.style.visibility = "";
});
</script>
Now, my issue is to get the same behavior, but for URL which contains anchors.
You can see this problem by clicking for example on a link which contains an anchor into the URL.
In this case, you won't see the spinner before HTML content displays : I would like to fix this issue but I don't know how to acheive it.
If someone could see a solution, that would be nice to tell it to me.
Thanks for your help
Use position: 'fixed'. This will keep the spinner in the center of the page, no matter if it is scrolled or not.
The spinner is present on your second example, but it is absolutely positioned at the top of your page.
try to use a CSS loader on MathJax_Preview class
CSS snippet
.MathJax_Preview {
display: inline-block;
width: 12px;
height: 12px;
background-image: url(https://anishmprasad.com/images/loader.gif);
background-repeat: no-repeat;
}
math{
display:none
}
demo jsfiddle here
I hope this way solves your problem

Unable to show spinner using spin.js after clicking button

I want to fade out the submit button after the user clicks on it, and I want to replace it with a loading icon. I'm using the spin.js library
This is my button:
<button type="submit" name="inscripcionUsuarioForm" id="botonSubmit" class="btn btn-primary pull-right" onclick="ocultarSubmit();" >Inscribirme ahora</button>
<div id="spinner"></div>
And this is my function inside formularios.js
function ocultarSubmit() {
$('#botonSubmit').fadeOut();
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 0.6 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: true // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
var spinner = new Spinner(opts).spin();
$("#spinner").append(spinner.el);
}
And I'm calling the file at the very end of the page:
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/additional-methods.min.js"></script>
<script src="/js/spin.min.js"></script>
<script src="/js/formularios.js"></script>
The button gets faded out but the spin wheel won't appear. The console won't show any errors. What could I be doing wrong?
Move the opts array, outside of the ocultarSubmit function, avoid inline JS:
var opts = {
lines: 13 // The number of lines to draw
, length: 28 // The length of each line
, width: 14 // The line thickness
, radius: 42 // The radius of the inner circle
, scale: 1 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
$('body').on('click', '#botonSubmit', function() {
$(this).toggleClass('in');
var target = document.getElementById('spinner')
var spinner = new Spinner(opts).spin(target);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://spin.js.org/spin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="submit" name="inscripcionUsuarioForm" id="botonSubmit" class="fade in btn btn-primary text-center">Inscribirme ahora</button>
<div id="spinner"></div>

Parallax scrolling opacity issue

I am coding my page so that the content fades in and out as you scroll.
when you scroll away from the "trilogy" section, then scroll back up, it is not 100% opacity when at the top again.
Also the content fades out half way the trilogy section, then fades back in again. I need the content when at the top (minus the green header area) to be 100% opacity when in view.
Code:
$(document).ready(function() {
$(window).bind('scroll', function(e) {
setParalaxContent();
});
function setParalaxContent() {
var trilogy = {
scrollTop: $(window).scrollTop(),
windowHeight: $(window).height(),
contentTop: $('.trilogy2').position().top,
contentHeight:2200
};
// determine scrollTop's bounds where content enters & exits the window
trilogy.lowerBound = trilogy.contentTop - trilogy.windowHeight;
trilogy.upperBound = trilogy.contentTop + trilogy.contentHeight;
// determine scrollTop's position percentage (x2) in relation to bounds
trilogy.percent = (trilogy.scrollTop - trilogy.lowerBound) / (trilogy.upperBound - trilogy.lowerBound) * 2;
}
$('.trilogy2').animate({
opacity: 1 - Math.abs(trilogy.percent - 1)
}, 1);
Please see full code at:
http://jsfiddle.net/warrior_76/pnr4fdyg/

Categories

Resources