Snippets

Crumina Team Row animations Seosight

Created by Alexandr Kostyrka
custom.js
Raw 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
/* -----------------------------
     * Scrollmagic scenes animation
     * ---------------------------*/
    CRUMINA.SubscribeScrollAnnimation = function () {
        var controller = new ScrollMagic.Controller();
        new ScrollMagic.Scene({triggerElement: "#subscribe-section"})
            .setVelocity(".gear", {opacity: 1, rotateZ: "360deg"}, 1200)
            .triggerHook("onEnter")
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: "#subscribe-section"})
            .setVelocity(".mail", {opacity: 1, bottom: "0"}, 600)
            .triggerHook(0.8)
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: "#subscribe-section"})
            .setVelocity(".mail-2", {opacity: 1, right: "20"}, 800)
            .triggerHook(0.9)
            .addTo(controller);
    };

    CRUMINA.SeoScoreScrollAnnimation = function () {
        var controller = new ScrollMagic.Controller();

        new ScrollMagic.Scene({triggerElement: ".crumina-seo-score"})
            .setVelocity(".crumina-seo-score .seoscore1", {opacity: 1, top: "-10"}, 400)
            .triggerHook("onEnter")
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: ".crumina-seo-score"})
            .setVelocity(".crumina-seo-score .seoscore2", {opacity: 1, bottom: "0"}, 800)
            .triggerHook(0.7)
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: ".crumina-seo-score"})
            .setVelocity(".crumina-seo-score .seoscore3", {opacity: 1, bottom: "0"}, 1000)
            .triggerHook(0.8)
            .addTo(controller);
    };

    CRUMINA.TestimonialScrollAnnimation = function () {
        var controller = new ScrollMagic.Controller();

        new ScrollMagic.Scene({triggerElement: ".crumina-testimonial-slider"})
            .setVelocity(".crumina-testimonial-slider .testimonial2", {opacity: 1, bottom: "-50"}, 400)
            .triggerHook(0.6)
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: ".crumina-testimonial-slider"})
            .setVelocity(".crumina-testimonial-slider .testimonial1", {opacity: 1, top: "20"}, 600)
            .triggerHook(1)
            .addTo(controller);
    };

    CRUMINA.OurVisionScrollAnnimation = function () {
        var controller = new ScrollMagic.Controller();

        new ScrollMagic.Scene({triggerElement: ".crumina-our-vision"})
            .setVelocity(".crumina-our-vision .elements", {opacity: 1}, 600)
            .triggerHook(0.6)
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: ".crumina-our-vision"})
            .setVelocity(".crumina-our-vision .eye", {opacity: 1, bottom: "-90"}, 1000)
            .triggerHook(1)
            .addTo(controller);
    };

    CRUMINA.MountainsScrollAnnimation = function () {
        var controller = new ScrollMagic.Controller();

        new ScrollMagic.Scene({triggerElement: ".crumina-background-mountains"})
            .setVelocity(".crumina-background-mountains .mountain1", {
                opacity: 1,
                bottom: "0",
                paddingBottom: "10%"
            }, 800)
            .triggerHook(0.4)
            .addTo(controller);

        new ScrollMagic.Scene({triggerElement: ".crumina-background-mountains"})
            .setVelocity(".crumina-background-mountains .mountain2", {opacity: 1, bottom: "0"}, 800)
            .triggerHook(0.3)
            .addTo(controller);
    };
    
    // Row background animation
        if ($subscribe_section.length && $subscribe_section.hasClass('js-animated')) {
            CRUMINA.SubscribeScrollAnnimation();
        }
        if ($('.crumina-seo-score').length) {
            CRUMINA.SeoScoreScrollAnnimation();
        }
        if ($('.crumina-testimonial-slider').length) {
            CRUMINA.TestimonialScrollAnnimation();
        }
        if ($('.crumina-our-vision').length) {
            CRUMINA.OurVisionScrollAnnimation();
        }
        if ($('.crumina-background-mountains').length) {
            CRUMINA.MountainsScrollAnnimation();
        }

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.