Cannon Safe® Branding Guidelines

In this example below you will see how to do a Cannon Safe® Branding Guidelines with some HTML / CSS and Javascript

This is a book I made some time ago, but the pen is a quick exploration of page turning using transitions and transforms.

Thumbnail
This awesome code was written by Ángel Valdez, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ángel Valdez ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Cannon Safe® Branding Guidelines</title>
  <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="book bound">
  <div class="pages">
    <div class="page">
      <h1>Cannon Safe®</h1>
      <h2>by Ángel Valdez</h2>
    </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
    <div class="page"> </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/aveart/cannon-safeandxae-branding-guidelines-QgRKrN */
.book {
  transition: opacity 0.4s 0.2s;
}
.page {
  width: 516px;
  height: 311px;
  background-colour: #fff;
  float: left;
  margin-bottom: 0.5em;
}
.page:first-child {
  float: right;
}
.page:nth-child(even) {
  clear: both;
}
.bound {
  -webkit-perspective: 250vw;
          perspective: 250vw;
}
.bound .pages {
  width: 1032px;
  height: 311px;
  position: relative;
  -webkit-transform: rotateX(12deg);
          transform: rotateX(12deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px transparent;
}
.bound .page {
  float: none;
  clear: none;
  margin: 0;
  position: absolute;
  top: 0;
  width: 516px;
  height: 311px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 1.4s;
  transition: transform 1.4s;
  transition: transform 1.4s, -webkit-transform 1.4s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.bound .page:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.7s;
  z-index: 2;
}
.bound .page:nth-child(odd) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  right: 0;
  border-radius: 0 4px 4px 0;
}
.bound .page:nth-child(odd):hover {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg);
}
.bound .page:nth-child(odd):hover:before {
  background: rgba(0, 0, 0, 0.03);
}
.bound .page:nth-child(odd):before {
  background: rgba(0, 0, 0, 0);
}
.bound .page:nth-child(even) {
  pointer-events: none;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  left: 0;
  border-radius: 4px 0 0 4px;
}
.bound .page:nth-child(even):before {
  background: rgba(0, 0, 0, 0.2);
}
.bound .page.grabbing {
  transition: none;
}
.bound .page.flipped:nth-child(odd) {
  pointer-events: none;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.bound .page.flipped:nth-child(odd):before {
  background: rgba(0, 0, 0, 0.2);
}
.bound .page.flipped:nth-child(even) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.bound .page.flipped:nth-child(even):hover {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg);
}
.bound .page.flipped:nth-child(even):hover:before {
  background: rgba(0, 0, 0, 0.03);
}
.bound .page.flipped:nth-child(even):before {
  background: rgba(0, 0, 0, 0);
}
*,
* :before,
*:after {
  box-sizing: border-box;
}
html,
body {
  background: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
  line-height: 1.5em;
}
.page {
  color: transparent;
  background: left top no-repeat;
  background-size: cover;
}
.page:nth-child(1),
.page:nth-child(2),
.page:nth-child(3),
.page:nth-child(4),
.page:nth-child(5),
.page:nth-child(6),
.page:nth-child(7),
.page:nth-child(8) {
  background-position: right top;
}
.page:nth-child(1) {
  background-image: url('https://i.imgur.com/bNiuO5v.jpg');
}
.page:nth-child(2) {
  background-image: url('https://imgur.com/1aweCsv.jpg');
}
.page:nth-child(3) {
  background-image: url('https://imgur.com/qRgGK1U.jpg');
}
.page:nth-child(4) {
  background-image: url('https://imgur.com/MELoWlF.jpg');
}
.page:nth-child(5) {
  background-image: url('https://imgur.com/oNagEBG.jpg');
}
.page:nth-child(6) {
  background-image: url('https://imgur.com/HA50yDZ.jpg');
}
.page:nth-child(7) {
  background-image: url('https://imgur.com/OfD9FLk.jpg');
}
.page:nth-child(8) {
  background-image: url('https://imgur.com/SlICa0U.jpg');
}



/*Downloaded from https://www.codeseek.co/aveart/cannon-safeandxae-branding-guidelines-QgRKrN */
var pages = $('.pages').children();
var grabs = false; 

pages.each(function(i) {
  var page = $(this);
  if (i % 2 === 0) {
    page.css('z-index', (pages.length - i)); 
  }
});

$(window).load(function() {
  
  $('.page').click(function() {
    var page = $(this);
    var page_num = pages.index(page) + 1;
    if (page_num % 2 === 0) {
      page.removeClass('flipped');
      page.prev().removeClass('flipped');
    } else {
      page.addClass('flipped');
      page.next().addClass('flipped');
    }
  });

  if (grabs) {
    $('.page').on('mousedown', function(e) {
      var page = $(this);
      var page_num = pages.index(page) + 1;
      var page_w = page.outerWidth();
      var page_l = page.offset().left;
      var grabbed = '';
      var mouseX = e.pageX;
      if (page_num % 2 === 0) {
        grabbed = 'verso';
        var other_page = page.prev();
        var centerX = (page_l + page_w);
      } else {
        grabbed = 'recto';
        var other_page = page.next();
        var centerX = page_l;
      }

      var leaf = page.add(other_page);

      var from_spine = mouseX - centerX;

      if (grabbed === 'recto') {
        var deg = (90 * -(1 - (from_spine/page_w)));
        page.css('transform', 'rotateY(' + deg + 'deg)');

      } else {
        var deg = (90 * (1 + (from_spine/page_w)));
        page.css('transform', 'rotateY(' + deg + 'deg)');
      }

      leaf.addClass('grabbing');

      $(window).on('mousemove', function(e) {
        mouseX = e.pageX;
        if (grabbed === 'recto') {
          centerX = page_l;
          from_spine = mouseX - centerX;
          var deg = (90 * -(1 - (from_spine/page_w)));
          page.css('transform', 'rotateY(' + deg + 'deg)');
          other_page.css('transform', 'rotateY(' + (180 + deg) + 'deg)');
        } else {
          centerX = (page_l + page_w);
          from_spine = mouseX - centerX;
          var deg = (90 * (1 + (from_spine/page_w)));
          page.css('transform', 'rotateY(' + deg + 'deg)');
          other_page.css('transform', 'rotateY(' + (deg - 180) + 'deg)');
        }

        console.log(deg, (180 + deg) );
      });


      $(window).on('mouseup', function(e) {
        leaf
          .removeClass('grabbing')
          .css('transform', '');

        $(window).off('mousemove');
      });
    });
  }
  
  $('.book').addClass('bound');
});

Comments

More from Ángel Valdez

A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart
A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart
A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart
A Pen by &#xC1;ngel Valdez

A Pen by Ángel Valdez

By aveart

You Might Also Like

4 &#x443;&#x440;&#x43E;&#x43A; &#x43A;&#x43B;&#x430;&#x441;&#x441;&#x43D;&#x430;&#x44F; &#x440;&#x430;&#x431;&#x43E;&#x442;&#x430;

4 урок классная работа

By onlyjoke
MAP DOM METROPOLE INTUITIVE

MAP DOM METROPOLE INTUITIVE

By rayser
Footer animation

Footer animation

By candroo
Conway&apos;s Game Of Life

Conway's Game Of Life

By centropy
ORM

ORM

By andru1989
quotemachine

quotemachine

By Locrin
createRadialGradient

createRadialGradient

By qingmingsang
!buttons

!buttons

By wido
© 2018 - Copyright CodeSeek.co
contact email