Lines Matching refs:to
5 You couldn't find a better place to find out!
7 Welcome to the stylesheet impress.js demo presentation.
9 Please remember that it is not meant to be a part of impress.js and is
14 But feel free to read through it and learn how to get the most of what
78 Now here is when interesting things start to appear.
82 want to leave anybody behind.
89 …background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(19…
128 Because the main point behind the impress.js demo is to demo impress.js
133 them to know that they are missing something - that's what the demo is
163 We start with basics to make sure it displays correctly in everywhere ...
243 And now we start to style each step separately.
247 and typography tricks here and there, so they had to be styles separately.
288 Let's move to 'big thoughts' with centered text and custom font sizes.
322 ... so we define display to `inline-block` to enable transforms and
323 transition duration to 0.5s ...
335 ... and we want 'positioning` word to move up a bit when the step gets
347 ... 'rotating' to rotate quater of a second later ...
364 ... and 'scaling' to scale down after another quater of a second.
397 That's not the best way to serve images, but because that's just this one
398 I decided it will be OK to have it this way.
419 Because we want to position <span> elements in 3D we set transform-style to
421 It is not needed by webkit browsers, but it is in Firefox. It's hard to say
433 Below we position each word separately along Z axis and we want it to transition
434 to default position in 0.5s when the step gets `present` class.
516 to be able to click on other steps.
532 Now, when we have all the steps styled let's give users a hint how to navigate
535 The best way to do this would be to use JavaScript, show a delayed hint for a
538 But I wanted to have some CSS fun and avoid additional scripting...
543 First of all I wanted the hint to appear only when user is idle for a while.
547 You also can't detect in CSS if the user is a first-time visitor, so I had to
550 knows how to navigate.
555 The other problem I had was caused by the fact that I wanted the hint to fade
561 CSS, so I needed a way to not only fade out the hint but also move it out of
565 with CSS transform and moving it up to show it. But I also didn't want this move
566 to be visible. I wanted the hint only to fade in and out visually, so I delayed
598 By default we don't want the hint to be visible, so we make it transparent ...
603 ... and position it below the bottom of the screen (relative to it's fixed position)
612 Now let's imagine that the hint is visible and we want to fade it out and move out
653 First after 4.5s delay we animate the transform property to move the hint
672 To prevent this, I decided to make <body> non clickable by setting
673 pointer-events property to `none` value.
674 Value if this property is inherited, so to make everything else clickable
677 If you want to know more about `pointer-events` here are some docs:
680 There is one very important thing to notice about this workaround - it makes
691 Thanks to this workaround above everything except #impress element is invisible
696 But it was fun to learn about it, wasn't it?