Skip to content

Instantly share code, notes, and snippets.

@DmitryMyadzelets

DmitryMyadzelets/index.html

Forked from anonymous/index.html
Created January 18, 2019 11:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DmitryMyadzelets/ba52c8a5f2532558a039ba45b6b88cde to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DmitryMyadzelets/ba52c8a5f2532558a039ba45b6b88cde to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jan 17, 2016.
    98 changes: 98 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,98 @@
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>

    <a id="view-code" href="http://codepen.io/virgilpana/pen/wBOBYo" target="_blank">VIEW CODE</a>

    <div id="window">
    <div id="header">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    </div>

    <div id="grid-selector">
    <div id="viewCarousel"></div>
    <div id="viewGrid" class="active">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    </div>
    </div>

    <div id="headline">
    <p></p>
    <p class="short"></p>
    </div>

    <div class="thumbs">
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    </div>

    <div id="carousel">
    <div class="innerCarousel">
    <div>

    </div>
    <div>
    <p class="current">
    <span></span>
    <span class="short"></span>
    </p>
    </div>
    <div>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    </div>
    <div>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    </div>
    <div>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    </div>
    <div>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    </div>
    <div>
    <p>
    <span></span>
    <span class="short"></span>
    </p>
    </div>
    </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    108 changes: 108 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    $(document).ready(function(){

    $('#viewCarousel').click(function(){
    if($(this).hasClass('active')) return;
    $(this).addClass("active");
    $("#viewGrid").removeClass("active");

    setCarousel();
    $('.thumbs p').eq(0).clone().addClass("floating-thumb").appendTo("#window")
    $('.thumbs').fadeOut(300);
    setTimeout(function(){
    $('.floating-thumb').addClass('animate');
    $("#carousel").delay(200).fadeIn(200, function(){$('.floating-thumb').remove();});
    }, 150);
    });

    $('#viewGrid').click(function(){
    if($(this).hasClass('active')) return;
    $(this).addClass("active");
    $("#viewCarousel").removeClass("active");

    $("#carousel").fadeOut(200, function(){resetCarousel();});
    $("<p class='floating-thumb animate'><span></span><span class='short'></span></p>").appendTo("#window");
    $('.thumbs').show();
    var parentpos = $('#window').offset();
    var childpos = $('.thumbs p').eq(currentSlide-1).offset();
    $('.thumbs').hide();

    $('.floating-thumb').removeClass('animate').css({'top':(childpos.top - parentpos.top) - 16+ "px", 'left': (childpos.left - parentpos.left)+"px", "transition": "300ms cubic-bezier(0,.93,.33,.99)", 'width': '155px', 'height':"60px", "padding-top":"121px"});
    $('.thumbs').delay(300).fadeIn(200, function(){$('.floating-thumb').remove()});

    });

    /* ---- Image Gallery Carousel ---- */

    var carousel = $('#carousel .innerCarousel');
    var carouselSlideWidth = 337;
    var currentSlide = 1;
    var isAnimating = false;
    var carouselSlides = $('.innerCarousel div');


    setCarousel();

    function resetCarousel(){
    $(carouselSlides).find('p').removeClass('current').eq(0).addClass('current');
    $("#carousel .innerCarousel").css('left','-168px');
    currentSlide = 1;
    }

    function setCarousel(){

    // building the width of the casousel
    var carouselWidth = 0;
    $('#carousel div').each(function(){
    carouselWidth += carouselSlideWidth;
    });

    $(carousel)[0].style = "";
    $(carousel).css('width', carouselWidth);
    // Load Next Image
    $(carouselSlides).eq(currentSlide).prev().find('p').unbind( "click" ).click(function(){

    if($(this).hasClass('current')){return;}
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft - carouselSlideWidth;


    if(isAnimating === true){return;}
    $(carousel).css({'left': "-" + newLeft + "px",
    "transition": "500ms cubic-bezier(0,.93,.33,.99)"
    });
    isAnimating = true;
    $(this).addClass("current");
    $(carouselSlides).eq(currentSlide).find('p')[0].className ="";
    setTimeout(function(){
    isAnimating = false;
    currentSlide--;
    setCarousel();
    }, 500);

    });

    $(carouselSlides).eq(currentSlide).next().find('p').unbind( "click" ).click(function(){

    if($(this).hasClass('current')){return;}
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft + carouselSlideWidth;

    if(isAnimating === true){return;}
    $(this).addClass("current");
    $(carouselSlides).eq(currentSlide).find('p')[0].className ="";
    $(carousel).css({'left': "-" + newLeft + "px",
    "transition": "500ms cubic-bezier(0,.93,.33,.99)"
    });
    isAnimating = true;
    setTimeout(function(){
    isAnimating = false;
    currentSlide++;
    setCarousel();
    }, 500);
    });

    }



    });
    228 changes: 228 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,228 @@
    body{
    background:#5298fc;
    text-align:center;
    font-family: "Open Sans", sans-serif;
    }
    #view-code{
    color:#fff;
    opacity:0.7;
    font-size:14px;
    text-transform:uppercase;
    font-weight:700;
    text-decoration:none;
    position:absolute;top:700px; left:50%;margin-left:-35px;
    }
    #view-code:hover{opacity:1;}
    #window{
    margin:30px auto 0;
    border-radius:6px;
    background:#fff;
    width:675px;
    height:620px;
    overflow:hidden;
    position:relative;
    }
    #header{
    background:#e3e5e9;
    height:33px;
    padding-left:18px;
    }
    #header .circle{
    background:#9fa2a8;
    border-radius:50%;
    float:left;
    width:12px;
    height:12px;
    margin-right:6px;
    margin-top:11px;
    }

    .thumbs{ padding:10px 50px 30px 70px; }
    .thumbs p, .thumbs p.floating-thumb{
    background: #e3e5e9;
    width: 155px;
    height: 60px;
    margin: 30px 30px 0 0;
    border-radius: 4px;
    float: left;
    padding-top: 121px;
    }

    .floating-thumb{
    background: #e3e5e9;
    width: 155px;
    height: 60px;
    border-radius: 4px;
    float: left;
    padding-top: 121px;
    position:absolute;
    top: 156px;
    left: 70px;
    }
    .floating-thumb.animate{
    width:303px;
    height:80px;
    margin-top:20px;
    padding-top: 326px;
    top: 146px;
    left: 186px;
    -webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99);
    -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99);
    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99);
    -o-transition: all 400ms cubic-bezier(0,.93,.33,.99);
    transition: all 400mscubic-bezier(0,.93,.33,.99);
    }
    .thumbs p span, p.floating-thumb span{
    display:block;
    height:10px;
    margin:10px 20px;
    background:#d2d4d9;
    border-radius:2px;
    }
    .thumbs p span.short, p.floating-thumb span.short{width:50px;}
    .thumbs p:hover{
    background:#dfe0e5;
    cursor:pointer;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;

    }
    #headline{padding:39px 50px 0px 70px;}
    #headline p{
    width:380px;
    margin:10px 0;
    height:15px;
    background:#9fa2a8;
    border-radius:3px;
    }
    #headline p.short{width:220px;}

    #grid-selector{
    width:100px;
    position:absolute;
    top: 92px;
    right: 79px;
    }

    #viewCarousel{
    background:#e3e5e9;
    width:20px;
    height:20px;
    float:right;
    border-radius:1px;
    }
    #viewCarousel:hover{
    cursor:pointer;
    }

    #viewCarousel:hover, #viewGrid:hover p{
    cursor:pointer;
    background:#cacdd1;
    }
    #viewCarousel.active, #viewGrid.active p{
    color:#5298fc;
    }
    #viewGrid{
    width:22px;
    height:20px;
    float:right;
    margin-top:-1px;
    margin-right:5px;
    }

    #viewGrid p{
    background: #e3e5e9;
    width: 9px;
    height: 9px;
    float: right;
    border-radius: 1px;
    margin: 1px;
    }
    #viewGrid.active p, #viewCarousel.active{
    background:#9fa2a8;
    }

    #carousel{
    overflow:hidden;
    position:relative;
    height:488px;
    margin-top: 25px;
    display:none;
    position:absolute;
    top:121px;
    left:0;
    width:675px;
    }
    #carousel .innerCarousel{
    position:absolute;
    top:0;
    left:-168px;

    }
    #carousel .innerCarousel div{
    width: 337px;
    height:448px;
    text-align:center;
    float:left;
    }
    #carousel .innerCarousel div p{
    background: #e3e5e9;
    width: 220px;
    height: 73px;
    margin: 30px auto 0 auto;
    border-radius: 4px;
    padding-top: 300px;
    margin-top: 38px;
    -webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    -ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    transition: all 300ms cubic-bezier(0,.93,.33,.99);

    }
    #carousel .innerCarousel div p:hover{cursor:pointer;}
    #carousel .innerCarousel div p.current:hover{cursor:normal;}

    #carousel .innerCarousel div p.current{
    width:303px;
    height:80px;
    margin-top:20px;
    padding-top: 326px;
    -webkit-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    -moz-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    -ms-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    -o-transition: all 300ms cubic-bezier(0,.93,.33,.99);
    transition: all 300ms cubic-bezier(0,.93,.33,.99);
    }
    #carousel .innerCarousel span,
    p.floating-thumb.animate span{
    height:10px;
    display:block;
    margin:10px 30px;
    height:12px;
    background:#d2d4d9;
    border-radius:3px;
    }
    #carousel .innerCarousel span.short,
    p.floating-thumb.animate span.short{width:170px;}





    .title{
    position:absolute;
    top:152px;
    left:0;
    width:100%;
    height:60px;
    overflow:hidden;
    -webkit-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
    -moz-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
    -ms-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
    -o-transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
    transition: all 400ms cubic-bezier(0,.93,.33,.99) 120ms;
    }
    7 changes: 7 additions & 0 deletions wBOBYo.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    wBOBYo
    ------


    A [Pen](http://codepen.io/virgilpana/pen/wBOBYo) by [Virgil Pana](http://codepen.io/virgilpana) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/virgilpana/pen/wBOBYo/license).