How to create the mechanics and appearance of the zoom effect used in the reveal.js framework?

Question

How to create the mechanics and appearance of the zoom effect used in the reveal.js framework?

Navigation

#1 by (1 votes)

1

Example: Reveal Zoom > Objective: Study the mechanics and appearance of Zoom with the best algorithmic solutions.

- From the problem of appearance:
1 - When inspecting the < section > looking for black background pattern
(background detail>>> slightly white circles in the center) it has a different color on the inspection (pink (background: # ff5e99;)) than the one on the slide.

- From the problem of mechanics:
1 - Make the center text receive a zoom effect that exceeds the limits of the screen. 2 - The text becomes opaque as it moves away from the center of the screen.

Update 1

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin-left: 200px;
  margin-top: 50px;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 350ms;
  -webkit-transform: translate(150%, 150%);
  -webkit-transform: scale(1.1, 1);
  -webkit-transition: translate 2s;
  animation-name: zoom;
  animation-duration: 550ms;
  transform: translate(150%, 150%);
  transform: scale(1.1, 1);
  transition: translate 2s;
  -ms-transform: scale(1.1, 1);
}

@keyframes zoom {
  from {
    opacity: 1;
    -webkit-transform: scale3d(0.7, 0.7, 0.7);
    transform: scale3d(1, 1, 1);
  }
  10% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    margin-left: 200px;
    margin-top: 50px;
    visibility: hidden;
  }
}

.zoom {
  -webkit-animation-name: zoom;
  animation-name: zoom;
}

<div>Test</div>

javascript html jquery

asked by anonymous 13.09.2018 / 19:22

1 answer

thead with fixed top table [duplicate] How do I create a field that references a sub-array of a collection in mongoose?

score 1 · Accepted Answer

As I told you this is a very basic example, I did half in the rush, but I think it will open your head to see that only with CSS you get something very close to that. With calm and some lines of code you can adapt in your project. Of course it would only be feasible for something small, few pages. But it's a start for you to test the possibilities.

The techniques used are basically scale() , blur() , opacity , and checkbox to pass the slide , but depending on radio buttom is better. Here is an example of slide swapping with only CSS I made in another tb-only response with CSS: #

15.09.2018 / 19:28