I have some Jquery
I need do call the var called ServicesAnimation when I scroll to main div or section that have div called for example regtangle-blue.
how can do that ?
jQuery(document).ready(function() {
var ServicesAnimation = anime.timeline().add({
targets: ['.box-info', '.regtangle-blue .h2', '.regtangle-blue .h3', '.regtangle-blue .h4', '.services .serv-box', '.how-it-works .h2', '.how-it-works .h3', '.how-it-works .col-md-4'],
translateY: [60, 0],
translateZ: 0,
opacity: [0, 1],
duration: 1600,
delay: anime.stagger(100)
});
});
Related
I'm trying to make some kind of a notification/message box giving players hints to advance the gameplay, here is the code
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec');
Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Phaser.Display.Align.In.Center works well with the first line of my text but doesn't center my 2nd line. How do I fix it?
Phaser.Display.Align.In.Center just aligns single GameObjects. Both lines of text are in the same GameObject noti_txt.
If you want to align both textlines, you could use the align property of the text GameObject, on creating it. { align: 'center' }
(Or after creation with the property setStyle here a link to the documentation)
Here the adapted Code:
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt = this.add.text(0, 0, 'Magic is not ready yet\n\nwait a sec', { align: 'center' });
Phaser.Display.Align.In.Center(noti_txt, noti_bg);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Alternatively / Extra:
I would only recommended it, if you are reusing text blocks (or dramatic effect), you could split the text, into two GameObjects.
But for that to work you would also have use the function Phaser.Display.Align.To.BottomCenter:
var game = new Phaser.Game({
width: 320, height: 200,
scene: {
create: create
}
});
function create() {
let noti_bg = this.add.rectangle(160, 100, 200, 120, 0x000000, .5);
let noti_txt1 = this.add.text(0, 0, 'Magic is not ready yet');
let noti_txt2 = this.add.text(0, 0, 'wait a sec');
// extra visual effect
this.tweens.add({
targets: noti_txt2 ,
alpha: 0,
ease: 'Power1',
duration: 1000,
yoyo: true,
repeat: -1,
});
Phaser.Display.Align.In.Center(noti_txt1, noti_bg);
// Just adding a minor horizontal offset
Phaser.Display.Align.To.BottomCenter(noti_txt2, noti_txt1, 0, 10);
}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
I'd like to have array slide_widths with widths of all .slide elements:
$( document ).ready(function() {
var $slider = $('.slider ul');
var slider_width = $slider.width();
var $slides = $('.slide');
var slide_widths = $.map($slides, function(slide) {
return slide.getBoundingClientRect().width;
});
console.log(slide_widths);
});
I get different results when I refresh my page:
1. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 0, 0, 0, 0, 0, 0, 0, 0]
2. [201.328125, 180, 214.28125, 180, 180, 180, 168.46875, 180, 145.078125, 144, 142.1875, 250.6875, 155.515625, 180, 180, 176.03125, 0, 0, 0, 0]
I guess this map function is still working when console.log outoputs an array? How can I avoid it ?
It would seem that your function is grabbing the element widths before they're actually loaded, and so the not-yet-loaded elements are returning widths of 0.
Try using $(window).on("load", function() { instead of $(document).ready(function() {
$(window).on("load" will wait for all elements on the page to load, whereas $(document).ready will not.
When clicked, I want a button to produce three child options, which then when tapped again should do retract and then disappear when behind the parent button. I hope this is clear from the code (note this is a nativescript application, hence the slightly strange css choices).
exports.fabTap = function (args) {
var google = page.getViewById("google");
var facebook = page.getViewById("facebook");
var amazon = page.getViewById("amazon");
if (clicked == false) {
google.style.visibility = "visible";
facebook.style.visibility = "visible";
amazon.style.visibility = "visible";
google.animate({
translate: { x: -55, y: -66 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
facebook.animate({
translate: { x: 0, y: -75 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
amazon.animate({
translate: { x: 55, y: -66 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
} else {
google.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
facebook.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
amazon.animate({
translate: { x: 0, y: 0 },
duration: 500,
curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
});
google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";
}
clicked = !clicked;
}
However, as you can see from the gif, on the return journey, the buttons just disappear before the return. What can I do to ensure this animates in sequence?
You're doing this:
google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";
immediately after starting the animations, not giving the animations time to run before you do it.
If you want to wait, either use a callback on the animations, or just delay 500ms.
I don't know what animation lib you're using, so I can't show an example of a callback waiting for all three to be done.
Here's the "just wait 500ms" version, though:
setTimeout(function() {
google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";
}, 500);
You could probably do this easily with transitions. Instead of using visibility, try using opacity to fade your buttons in and out. Or, you could add a transition end listener to your JS and only set visibility to collapse after the three tabs have moved back under the main button. I think your problem is trying to animate visibility.
I'm still in the learning stage of ajax and scripting. I recently stumbled upon this website http://www.maisonbertine.com/ found it very interesting using this script for loading the menu and contents.
I tried to learn and mimic the code on my testing website http://www.ztest.ca but I couldn't get it to work. If it works, it should load the Left Menu and Right Main H1 from www.ztest.ca/en/en.html
The after clicking on the language link, it does not change the url to www.ztest.ca/en/ so I guess the pushState method didn't execute. Also Firefox console is showing POST ztest.ca/en/ [HTTP/1.1 200 OK 209ms].
Below are the current code:
Language selection container:
<div id="container"><aside id="leftsidebar" class="is-white is-left"></aside>
<div class="lang" id="lang">
<div class="lang_logo"></div>
<div class="lang_selection" id="lang_selection">
<ul>
<li>English</li>
<li>Français</li>
</ul>
</div>
</div>
</div>
Script used to perform the TweenMax animation:
<script>window.jQuery || document.write('<script src="/js/libs/jquery-1.11.0.min.js"><\/script>')</script>
<script src="/js/libs/TweenMax.min.js"></script>
<script src="/js/libs/CSSPlugin.min.js"></script>
<script src="/js/script.js"></script>
<script>
$(function () {
if($(document).width()<736){
return false;
}
var tween1 = new TimelineMax();
tween1.add([
TweenMax.to("#lang", 1.3, {delay: 1, z: 0, left: 160, autoAlpha: 1, ease: Expo.easeOut,force3D:true}),
]);
tween1.add([
TweenMax.to("#lang_selection", 0.5, {z: 0, left: 160, ease: Expo.easeOut, force3D:true})
]);
$lang = $('#lang_selection');
$lang.on('click', 'a', function(e){
e.preventDefault();
$a = $(this);
var href= $a.attr('href');
$.ajax({
url:href,
type:'post',
dataType:'json',
success: function(response){
$html = $(response.page.html);
$wrapright = $($html[0]);
var nav = response.mainnav;
$container = $('#container');
$container.prepend($wrapright);
$('#leftsidebar').html(nav);
if(Modernizr.history){
window.history.pushState({href:'/'},'','/');
window.history.pushState({href:href},'',href);
document.title = response.page.seotitel;
}
tween1.add([
TweenMax.to("#lang_selection", 0.8, {z: 0, left: 0, ease: Expo.easeOut,force3D:true})
]);
tween1.add([
TweenMax.to("#lang", 0.8, {z: 0, left: -200, ease: Expo.easeOut,force3D:true})
]);
tween1.add([
TweenMax.to("#leftsidebar", 1.5, {z: 0, left: 0, ease: Expo.easeOut,force3D:true})
]);
tween1.add([
TweenMax.to("#overlay", 0.9, {z: 0, autoAlpha: 1,force3D:true})
]);
tween1.add([
TweenMax.to("#main h1", 2, {z: 0, top: '25%', autoAlpha: 1, ease: Expo.easeOut,force3D:true}),
]);
}
});
});
});
</script>
I think the problem is occurring here:
$lang = $('#lang_selection');
$lang.on('click', 'a', function(e){
e.preventDefault();
$a = $(this);
var href= $a.attr('href');
$.ajax({
url:href,
type:'post',
dataType:'json',
success: function(response){
$html = $(response.page.html);
$wrapright = $($html[0]);
var nav = response.mainnav;
$container = $('#container');
$container.prepend($wrapright);
$('#leftsidebar').html(nav);
if(Modernizr.history){
window.history.pushState({href:'/'},'','/');
window.history.pushState({href:href},'',href);
document.title = response.page.seotitel;
}
Please help me find the mistake I made here. Thank you!
I am using bx slider but the problem is that when i resize the window, the images in slider should change according to window size..
I have tried the below code and it works but every time I have to reload the page, can anybody help me please. And thanks in advance.
<script type="text/javascript">
if ($(window).width() < 480 ) {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 2,
maxSlides: 2,
startSlide: 0,
slideMargin: 10
});
});
}
else if ($(window).width() > 480 ) {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 4,
maxSlides: 4,
startSlide: 0,
slideMargin: 10
});
});
}
else {
$(document).ready(function(){
$('#slider1').bxSlider({
slideWidth: 280,
minSlides: 4,
maxSlides: 4,
startSlide: 0,
slideMargin: 10
});
});
}
</script>
First make put your slider into a var (better for later "reloadSlider"), then make your life easier by creating var-s for your settings (since you will need them at least twice).
Finally you need a $( window ).resize function.
See if it works (I didn't test it but should work since I have just completed mine - kind of more complicated to show it).
Try this (by the way, I see that 'medium' and 'big' sizes have same settings...):
<script type="text/javascript">
var slider;
var defsOne = { slideWidth: 280, minSlides: 2, maxSlides: 2, startSlide: 0, slideMargin: 10 }
var defsTwo = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
var defsThree = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
var myDefs = {};
$(document).ready(function(){
if ($(window).width() < 480 ) {
myDefs = defsOne;
}
else if ($(window).width() > 480 ) {
myDefs = defsTwo;
}
else {
myDefs = defsThree;
}
slider = $('#slider1').bxSlider(myDefs);
});
$( window ).resize(function() {
var ww = $(window).width();
if ($(window).width() < 480 ) {
myDefs = defsOne;
}
else if ($(window).width() > 480 ) {
myDefs = defsTwo;
}
else {
myDefs = defsThree;
}
slider.reloadSlider( myDefs );
});
</script>
Actually I would not slider.reloadSlider() at every resize (at every window pixel change), put somewhere a flag to check if size really changed from previously used one and only then do the reload:
if ( sizeReallyChanged ) {
slider.reloadSlider( myDefs );
}
If you don't you are going to reload it tons of times ...
Of some extra-help could be setting an object for "global settings" - since yours are all almost the same an then :
var defsGlobal = { slideWidth: 280, startSlide: 0, slideMargin: 10 }
var defsOne = { minSlides: 2, maxSlides: 2 }
var defsTwo = { minSlides: 4, maxSlides: 4 }
and finally "connect" all of them (of in the right place i.e. 'if'):
...
wholeDefs = $.extend( {} , defsOne, defsGlobal);
...
slider = $('#slider1').bxSlider(wholeDefs);
...
Hope this could help,
Bye nIc