4 résultats taggé jquery

Use $ & $$ Instead of document.querySelector/All in JavaScript without jQuery

From comment below:

const $ = (q, d = document) => 
  /#\S+$/.test(q)                       // check if query asks for ID
  ? d.querySelector.bind(d)(q)          // if so, return one element
  : [...d.querySelectorAll.bind(d)(q)]  // else, return all elements in an array.

Usage : $('#main').innerHTML

Scrolling doux vers une ancre

$('a[href*=#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 700); });

Un lien « Retour en haut » dynamique

<div class="relative">
    <div class="toTop">
        <a href="#top" title="Retour en haut">
            Retour en haut
        </a>
    </div>
</div>
<footer id="footer">
…
</footer>
.relative {
    position:relative;
}

.toTop {
    display:none;
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1000;
}
function toTop(element,footer){
    var scroll = $(window).scrollTop();
    var maxScroll = $(window).height() * 0.4;

    if(scroll > maxScroll)
        $(element).show();
    else
        $(element).hide();

    if($(element).offset().top + $(element).height() >= $(footer).offset().top - 10)
        $(element).css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $(footer).offset().top)
        $(element).css('position', 'fixed');
}   

$(window).scroll(function() {
    toTop('.toTop',"#footer");
});

$(window).resize(function() {
    toTop('.toTop',"#footer");
});

Effet parallax avec jQuery

/*
* Adds a parallax effect to a background image
* (position:fixed;no-repeat;background-size:42%;)
*
* element : the element with a background image
* percent : percent of the background-size (0.42)
* height : height of the background image
* width : width of the background image
* factor : factor of speed (the lower the faster)
* reference : the element bottom-placed to get the total
*             height of the page
*
* author : Guillaume Litaudon  <guillaume.litaudon@gmail.com>
*/

function parallax(element,percent,height,width,factor,reference){
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    var sizePercent = percent == 1 ? height : ((winWidth*percent)/width)*height;

    var maxScroll = -(sizePercent - winHeight);
    var speed = factor*($(reference).offset().top / winHeight);
    var yPos = -($(window).scrollTop() / speed);
    yPos = yPos >= 0 ? 0 : yPos;
    yPos = yPos >= maxScroll ? yPos : maxScroll;
    var coords = '0 '+ yPos + 'px';

    $(element).css({ backgroundPosition: coords });
}

function goGoParallaxEffect(){
    /* La taille dépend de si l'on est en-dessous
    * de pictureWidth ou non
    */
    var pictureHeight = 1080;
    var pictureWidth = 388;

    if($(window).width() > pictureWidth)
        parallax('#page',0.42,pictureWidth,pictureHeight,5,footer);
    else
        parallax('#page',1,pictureWidth,pictureHeight,5,footer);
}

$(window).scroll(function() {
    goGoParallaxEffect();
});

$(window).resize(function() {
    goGoParallaxEffect();
});