guidobouman/panelsnap

PanelSpnap on Magento 2

Closed this issue · 6 comments

jroca22 commented

Hi,

can't get PanelSnap to work on Magento 2.
Can you please provide any hint?
Thanks,
Juan

guidobouman commented

Without a codepen or jsfiddle I can't really help out. I need to see your code.

jroca22 commented

Hi,
I'm applying the panelsnap on my home page.
The thing is that the home page is made of 2 components: a static block and the CMS home page.
here is the static block:


<section>
<div class="full-screen-slider">
    <div id="banner-slider-demo-20" class="owl-carousel owl-banner-carousel" data-slider-id="1">
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/01.jpg"}}) center center / cover no-repeat; position: relative;">
            <ul class="scene" style="width:100%;height:100%:">
                <li class="layer" data-depth="0.05">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/green_shoes.png"}}" alt="" />
                </li>
                <li class="layer" data-depth="0.06">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake1.png"}}" style="position:absolute;top:40%;left:35%" alt="" />
                </li>
                <li class="layer" data-depth="0.07">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake2.png"}}" class="animation-spin" style="position:absolute;top:20%;left:50%" alt="" />
                </li>
                <li class="layer" data-depth="0.10">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake3.png"}}" class="animation-wave" style="position:absolute;top:50%;left:80%" alt="" />
                </li>
                <li class="layer" data-depth="0.15">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/blurflake4.png"}}" style="position:absolute;top:70%;left:55%" alt="" />
                </li>
            </ul>
            <div class="content" style="left:20%;top:30%;width:auto;">
                <h2 style="color: #fff;">Running<br>shoes</h2>
                <a href="#">SEE MORE</a>
            </div>
        </div>
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/TUTTOLENTE_W_bg.jpg"}}) center center / cover no-repeat; position: relative;">
            <ul class="scene" style="width:100%;height:100%:">
                <li class="layer" data-depth="0.05">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/TUTTOLENTE_W.png"}}" alt="" />
                </li>
            </ul>
            <div class="content" style="left:20%;top:30%;width:auto;">
                <h2 style="color: #fff;">TUTTOLENTE W<br>BLUE</h2>
                <a href="#">See Collection</a>
            </div>
        </div>
        <div class="item" style="background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/03.jpg"}}) center center / cover no-repeat; position: relative;">
            <ul class="scene" style="width:100%;height:100%:">
                <li class="layer" data-depth="0.05">
                    <img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/ball.png"}}" alt="" />
                </li>
            </ul>
            <div class="content" style="left:20%;top:30%;width:auto;">
                <h2 style="color: #fff;">Football<br>accessories</h2>
                <a href="#">SEE MORE</a>
            </div>
        </div>
    </div>
    <div class="owl-thumbs" data-slider-id="1">
        <button class="owl-thumb-item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/01_thumb.jpg"}}"/></button>
        <button class="owl-thumb-item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/TUTTOLENTE_W_bg_tmb.jpg"}}"/></button>
        <button class="owl-thumb-item"><img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/03_thumb.jpg"}}"/></button>
    </div>
    <script type="text/javascript">
        require([
            'jquery',
            'owl.carousel/owl.carousel'
        ], function ($) {
            var owl_20 = $("#banner-slider-demo-20").owlCarousel({
                items: 1,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                dots: false,
                navRewind: true,
                animateIn: 'fadeIn',
                animateOut: 'fadeOut',
                thumbs: true,
                thumbImage: false,
                thumbsPrerendered: true,
                thumbContainerClass: 'owl-thumbs',
                thumbItemClass: 'owl-thumb-item',
                loop: true,
                nav: false,
                navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"]
            });
        });
        require([
            'jquery',
            'js/jquery.parallax.min'
        ], function ($) {
            $(document).ready(function(){
                $('.scene').parallax();
            });
        });
    </script>
</div>
</section>

and this is my CMS Home Page

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.css" />
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script-->
<!--script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.js"></script-->
<style>
.porto-icon-chevron-left, .porto-icon-chevron-right {
    color: #fff;
}
p.p-banner {
    position: relative;
    color: #fff;
    text-transform: uppercase;
    text-indent: 8px;
    line-height: 1;
    align-items: center;
    padding-left: 10%;
    //margin-top: 50%;
display: inline-block;
    top: 50vh;
}
span.banner-img-before {
    font-size: 5em;
    padding: 0;
}
span.banner-img-after {
    font-size: 12em;
    padding: 0;
}
@media only screen and (max-width: 1024px)  {
	span.banner-img-before {
	    font-size: 2em;
	    padding: 0;
	}
	span.banner-img-after {
	    font-size: 6em;
	    padding: 0;
	}
}
</style>
<script type="text/javascript">
require(['jquery'],function($){


    // Assign a variable for the application being used
    var nVer = navigator.appVersion;
    // Assign a variable for the device being used
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        // In Safari, the true version is after "Safari" 
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          // Set a variable to use later
          var mobileSafari = 'Safari';
        }
    }
	$(window).on('resize', function () {
	if (mobileSafari == 'Safari') {	
	    $('.banner-custom').css('height', function () {
	        return (($(window).height()+65))
	    });
	} else {
	    $('.banner-custom').css('height', function () {
	        return (($(window).height()))
	    });
	};
	}).resize();
/*$(window).on('resize', function () {
    $('.banner-custom').css('height', function () {
        return (($(window).height()+100))
    });
}).resize();*/});
</script>
<script type="text/javascript">
require(["jquery","panelsnap/jquery.panelSnap"], function($){
$('page-wrapper').panelSnap();
$('columns').panelSnap();
});

</script>
<script type="text/javascript">
/*require(["jquery"], function($){
$('body').panelSnap();
});*/

</script>
<section>
<div class="row tocenter" style="margin:0;">
    <div class="col-sm-12 col-xs-12 col-lg-6 col-md-6 sm-f-right banner-custom" style="padding:0;background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_him.jpg"}}) center center / cover no-repeat;">
        <!--a class="image-link" href="#"-->
<p class="p-banner"><span class="banner-img-before">Shop</span><br /><span class="banner-img-after">Men</span></p>
            <!--img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_him.jpg"}}" alt="">
        </a-->
    </div>
    <div class="col-sm-12 col-xs-12 col-lg-6 col-md-6 banner-custom" style="padding:0;background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_her.jpg"}}) center center / cover no-repeat;">
        <!--a class="image-link" href="#"-->
<p class="p-banner"><span class="banner-img-before">Shop</span><br /><span class="banner-img-after">Women</span></p>
            <!--img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_her.jpg"}}" alt="">
        </a-->
    </div>
     <div class="col-sm-12 col-xs-12 col-lg-6 col-md-6 banner-custom" style="padding:0;background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_kids.jpg"}}) center center / cover no-repeat;">
        <!--a class="image-link" href="#"-->
<p class="p-banner"><span class="banner-img-before">Shop</span><br /><span class="banner-img-after">Kids</span></p>
            <!--img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_her.jpg"}}" alt="">
        </a-->
    </div>
     <div class="col-sm-12 col-xs-12 col-lg-6 col-md-6 banner-custom" style="padding:0;background:url({{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_specials.jpg"}}) center center / cover no-repeat;">
        <!--a class="image-link" href="#"-->
<p class="p-banner"><span class="banner-img-before"></span><br /><span class="banner-img-after">COLAB</span></p>
            <!--img src="{{media url="wysiwyg/smartwave/porto/homepage/20/slider/4banner_her.jpg"}}" alt="">
        </a-->
    </div>
</div>
</section>

<style type="text/css">
@media (min-width: 768px) {
    #featured_product {
        padding: 0 85px;
    }
}
h2.filterproduct-title {
    background: none;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: #000;
    margin-top: 90px;
    margin-bottom: 80px;
}
.filterproduct-title .content {
    padding: 0;
    background-color: transparent;
}
body.layout-fullwidth.cms-index-index .page-main {
    padding: 0;
}
.columns .column.main {
    padding: 0;
}
.owl-theme .owl-controls {
    margin: 0;
}
#home-content-slider-demo-20.owl-theme .owl-dots .owl-dot span {
    background: transparent;
    border: 2px solid #fff;
}
#home-content-slider-demo-20.owl-theme .owl-dots .owl-dot.active span, #home-content-slider-demo-20 .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
}
#home-content-slider-demo-20.owl-bottom-narrow .owl-controls {
    bottom: 50px;
}
.product-item-photo {
    padding: 0;
    border: 0;
}
.product.actions, .product-item .product-reviews-summary {
    display: none;
}
.product-item-name.product.name > a {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
}
.product-item-name.product.name > a:hover {
    text-decoration: none;
}
.page-header.type13 {
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
}
@media (max-width: 767px) {
    h2.filterproduct-title {
        margin: 40px 0;
        font-size: 25px;
    }
    #home-content-slider-demo-20.owl-bottom-narrow .owl-controls {
        bottom: 5px;
    }
}
</style>

Then when it loads Magento puts all inside wrappers (retrosuperfuture.net/magento2)
Don't know if that helps you.
Thanks,
Juan

guidobouman commented

You need to invoke panelSnap on a scrolling element.

I've fixed your jsFiddle: https://fiddle.jshell.net/gwmtv2t7/4/

Changes needed to fix your code:
Changed the invocation to body and fixed the panelSelector to account for this change.

jroca22 commented

Thanks guidobouman!!!