HTML

 
<div class="rvk">
  <div class="rocks">
    <h2>Reykjavik Rocks</h2>
    <h1>Your Luxury Agent in Iceland</h1>
    <p>We deliver high end, customized luxury. Complete tailored experience for Iceland whether it is rejuvenation and relaxation, a family trip, a romantic break for a couple, an individual only or a party experience – we can cater to your every need.</p>
    <button>About us</button><button>Contact us</button>  
  </div>
  <div class="info">
    <i></i>
    <div class="about-us">
      <p>Reykjavik Rocks is the <strong>complete personalized experience</strong>.</p>
      <p>Reykjavik Rocks was founded 2009 by Unnar Helgi Danielsson who has <strong>extensive experience in managing tailored events</strong> in Iceland and London.</p>
      <p>We have worked with many groups of people from corporate and educational backgrounds to celebrity and well known public figures.</p>
      <p>We also cater for bachelor and bachelorette parties plus weddings, anniversaries, film productions, location and set finding – <strong>any event can be created by Reykjavik Rocks</strong>.</p>
      <p>Our concierge phone is also <strong>available 24/7</strong>. Please see the number on the site to call.</p>
    </div>
    <div class="contact-us">
      <p>Our concierge phone is <strong>available 24/7</strong>!</p>
      <h3>+354 691 3350</h3>
      <p>Please contact us for a <strong>fast response</strong> via email: <a href="mailto:luxury@reykjavik.rocks">luxury@reykjavik.rocks<i></i></a></p>
    </div>
  </div>
  <div class="cover"></div>
  <div class="tv">
    <div class="screen" id="tv"></div>
  </div>
</div>

JS

 
  var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/player_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var tv,
    playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
  var vid = {'videoId': 'E4tRyYxrU5w', 'suggestedQuality': 'hd1080', 'startSeconds': 1, 'endSeconds': 196};
​
  function onYouTubePlayerAPIReady(){
    tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
  }
​
  function onPlayerReady(){
    tv
      .loadVideoById(vid)
      .seekTo(Math.floor(Math.random() * (180 - 1 + 1)))
      .mute();
  }
​
  function onPlayerStateChange(e){
    if (e.data === 1){
      $('#tv, .cover').addClass('on');
    } else if (e.data === 0){
      tv.seekTo(vid.startSeconds);
    }
  }
​
  function vidRescale(){
​
    var w = $(window).width() + 200,
      h = $(window).height() + 200;
​
    if (w/h > 16/9){
      tv.setSize(w, w/16*9);
      $('.tv .screen').css({'left': '0px'});
    } else {
      tv.setSize(h/9*16, h);
      $('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
    }
  }
​
  $(document).on('ready', function(){
​
    $('button').on('click', function(e){
      e.stopPropagation();
      $('button').removeClass('on');
      $(this).toggleClass('on');
      $('.rocks, .info, .tv').addClass('on');
    });
​
    $('button:first-of-type').on('click', function(){
      $('.info > div').removeClass('on');
      $('.about-us').addClass('on');
    });
​
    $('button:last-of-type').on('click', function(){
      $('.info > div').removeClass('on');
      $('.contact-us').addClass('on');
    });
​
    $('.info').on('click', function(e){
      e.stopPropagation();
    });
​
    $('html, .info > i').on('click', function(){
      $('button, .rocks, .info, .tv, .about-us, .contact-us').removeClass('on');
    });
  });
​
  $(window)
    .on('load', function(){
      vidRescale();
      $('.rocks').children().addClass('show');
    })
    .on('resize', function(){
      vidRescale();
    });
​
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-59016839-1', 'auto');
  ga('send', 'pageview');

文件管理点击文件查看URL

图片

暂无文件

CSS

暂无文件

JavaScript

暂无文件

其他

暂无文件

加载中 ..................