smallseo.info

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz impress.js is a presentation tool based on the power of css3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

How does Impress.js's CSS work?

I was reading about Impress.js and I have some questions about the code below (Part of the Inpress's demo).

.impress-enabled .step {
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

My questions:

  1. What is .impress-enabled class here for?

  2. So class .active is applied on the step currently displayed? And thus, its opacity changes to 1 when its displayed and back to .3 when its next one is displayed; as described in .impress-enabled .step above it, right?

Thanks for help


Source: (StackOverflow)

How to remove CSS and JS from a certain content-type in Drupal 7

I've come here after looking for how to selectively add a CSS or JS to a given node based on its view mode and content type. That question is answered pretty straightforward here (http://stackoverflow.com/questions/8295498/how-to-add-css-and-js-files-on-node-pages-independent-of-the-theme).

Now I'd love to clear everything: I'm looking for a way to show my desired CSS and JS but only that, with no other JS and CSS. I'm trying to integrate Impress.js (And I don't like the available solutions) and it seems to be conflicting with Jquery, as both scripts are properly loaded but both latest Firefox and Chromium browsers throw the "old browser" message.

Any ideas on how to unset every single CSS and JS so that the CSS and JS I want to use are the only ones really active?

Thanks!

I've tried the following, to no success:

$mycss = $vars['styles'];

unset($micss[drupal_get_path('module','system') .'/system.base.css']);

...

unset($micss[drupal_get_path('module','toolbar') .'/toolbar.css']);

$vars['styles'] = $mycss;

(I added a lot of different css i want to get rid of, but this explains the idea). It didn't work, though :)

Edit. I'm sorry for the bad markup, I'm looking for a way to clean/mark code.


Source: (StackOverflow)

impress.js: How to run function on slide #id and class .active (or slide enter)?

How do make a video play on slide enter, and make it stop on slide exit with impress.js? Upon entering a slide, there is a class ".active". In fact, I can just use a unique ID, I just need to know how to tell impress.js to run on slide enter/exit.

I don't know how to code jQuery, but this was my attempt

document.getElementById('video-audio').addEventListener( ($.Event("keydown", { keyCode: 38 })), function () {WhenPlay()});

function WhenPlay() { 
 var classList = document.getElementById('video-audio').className.split(/\s+/);
      for (var i = 0; i < classList.length; i++) {
        if (classList[i] === 'active') {
        //console.log(classList[i]);
                        playVideo();
                     }
                  }
              }

Source: (StackOverflow)

Simple impress.js does not work

Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.

<html lang="en">
    <head>
        <title>Impress Demo</title>
    </head>
    <body>
        <div id="impress">
            <div id="start">
                    <p style='width:1000px;font-size:80px;
                text-align:center'>Creating Stunning Visualizations</p>
                <p>Impress.js </p>
                </div>

            <div id="slide2" data-x="-1200" data-y="0">
                    <p style='width:1000px;font-size:80px;'>
                First Slide Moves From Left To Right</p>
                <p>Impress.js </p>
                </div>
        </div>
        <script type="text/javascript">impress().init();</script>
        <script type="text/javascript" src="js/impress.js"></script>
    </body>
</html>

And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16. enter image description here


Source: (StackOverflow)

Can I render a webkit page to HD video?

First I was wondering if it would be possible to make a good HD video from a prezi slideshow or something like impress.js.

I've seen people trying to make screencasts from their browser page, but the quality is often sub optimal. (motion often not fluent)

So, is it possible to render a - speaking more generally - html page with animations to a video? (Perhaps using the webkit engine?)

  • without interaction, just playing the normal jquery animations (perhaps slowing down the webkit engine to be able to render the pages to some video file)
  • with interaction recording all animations on the page

Update: Using Jan Dvorak's tip I tried this:

<a rel='nofollow' href="javascript:(function(){
   var factor = 10; 
   function slower(x){
      return function(){
        return x.apply(this,arguments)/factor;
      }
    }
function longer(x){
      return function(f, time){
        time = time * factor;
        return x.apply(this,arguments);
    }
  }
  Date.prototype.getTime = slower(Date.prototype.getTime);
  Date.now = slower(Date.now);
  setTimeout = longer(setTimeout);
  setInterval = longer(setInterval);
  alert('Warning, jQuery slowed down'); 
 })();">Test bookmarklet!</a>

But this not seem to have any effect on a this page for example: http://bartaz.github.com/impress.js/#/bored


Source: (StackOverflow)

Impress.js hide a slide on a condition

I'm building a presentation using impress.js which will generate a slide only upon a certain condition being true using JQUERY.

    <div id="condition_slide" style="display:none;" class="step" data-x="12000" data-y="5000" data-z="2000" data-rotate="375" data-scale="1"><p>TEST</p></div>

By setting the display attribute to none, I thought I could have the slide not be part of the original deck until I run my Jquery function for it to appear.

function generateSlide($ID,$isThere)
 {
   if($isThere)
   {
     $('#condition_slide').css("display","block");
   }
 }   

However, the presentation still transitions to a blank slide despite having the initial div styling of display:none.

I have also tried not including the div in the html page and approaching the problem as follows

    function generateSlide($ID,$isThere)
 {
   if($isThere)
   {
     $div = '<div id="condition_slide"  class="step" data-x="12000" data-y="5000" data-z="2000" data-rotate="375" data-scale="1"><p>TEST</p></div>';
     $('#impress').children().first().append($div);

   }
 }

This allows the slide to appear corresponding to the condition, but it is embedded in the background of each of my slides and does not seem to be recognized as its own individual slide as part of the presentation.

Any help or advice would be greatly appreciated!


Source: (StackOverflow)

Create an animated bullet point list using Impress.js

I'm using impress.js for a presentation I have to give tomorrow and all I'm wondering is how (or if it's possible) to have my list items in my unordered list animate in one by one on click just like it would work in powerpoint/prezi.

Here's my template

<h2>Presentation</h2>
<ul>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
</ul>

and here's my CSS I have so far which animates all the li's in together, but not one at a time on click.

.notes {
    display:none;
}

.step h2 {
    font-size: 78px;
    font-weight: bold;
}

.step ul {
  list-style-type: square;
  font-size: 1.4em;
  text-align: left;
  line-height: 1.5em;
  list-style-position: inside;
  transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -o-transform: translateX(-300px);
  -webkit-transform: translateX(-300px);
  transition: all 1s ease-in 0s ;
  -moz-transition: all 1s ease-in 0s ;
  -ms-transition: all 1s ease-in 0s ;
  -o-transition: all 1s ease-in 0s ;
  -webkit-transition: all 1s ease-in 0s ;
}

.step.present ul {
  transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

any ideas?


Source: (StackOverflow)

Inject javascript code into html with Express

I am writing a web application using Express framework to generate Impress.js presentations and apply a visual editor on them. I have set up the app.js for only getting the .html file but I want to inject a javascript code from a separate file before the body closing tag of the .html file.

For example, I will have a route handler /edit and then the script will be triggered after it have been injected into the html code.

var express = require('express');

var app = express();


app.configure(function(){
    app.use(express.static(__dirname + '/public'));
});

app.get('/:file', function(req, res) {
  res.sendfile(__dirname + '/public' + file);
});

app.listen(3000);
console.log('Listening on port 3000');

Any ideas on how to achieve this would be more than welcome!


Source: (StackOverflow)

Why impress.js does not rotate

I am messing a around with impress.js a little. I wanted 4 slides and wanted to make it to look like there is a square in the middle.

My code looks like this:

<!doctype html>
<html>
    <head>
        <title>my first presentation using impress.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel='nofollow' href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
        <link rel='nofollow' href="css/impress-demo.css" rel="stylesheet" />
    </head>
    <body>

        <div id="impress">
            <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
                <p>This is my first slide.</p>
            </div>
            <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
                <p>This is my second slide.</p>
            </div>
            <div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
                <p>This is my third slide.</p>
            </div>
            <div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
                <p>This is my fourth slide.</p>
            </div>
        </div>
        <script type="text/javascript" src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>

It has to look like this in the end. enter image description here

I do not know why it is not working. Help is appreciated.


Source: (StackOverflow)

Bootstrap slides in impress.js

I'm looking for a way to enable the Bootstrap style for certain slides in an impress.js presentation. I've tried to do this by adding the bootstrapslide style to these slides and compiling Boostrap Less such that it is applied only to these div items with that style. However the slides show little of the Boostrap Style.

This is probably because impress.js first empties all styles (h1, pre,...) and that bootstrap adds some attributes, but fails to make the changes visible. I have however no immediate solution to this problem.

Minimal Working Example:

presentation.htm:

<!doctype html>
<html lang="en">

<head>
  <link rel='nofollow' href="http://netdna.impressjscdn.com/impressjs/0.5.3/css/impress-demo.css" rel="stylesheet" />

  <!-- custom.css -->
  <link rel='nofollow' href="http://pastebin.com/raw.php?i=dTdEky6N" rel="stylesheet" />
</head>

<body>
  <div id="impress">
    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
      <h1><center>Presentation</center></h1>
      <span><center>November 30, 2014</center></span>
    </div>
    <div id="slide0" class="step slide bootstrapslide" data-x="1800" data-y="0">
      <h1>Title1</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div id="slide1" class="step slide bootstrapslide" data-x="3600" data-y="0">
      <h1>Title2</h1>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://netdna.impressjscdn.com/impressjs/0.5.3/js/impress.js"></script>
  <script>
    impress().init();
  </script>
</body>

</html>

custom.css is compiled from custom.css and the Bootstrap Less package:

custom.less

div.bootstrapslide {
    @import "bootstrap.less";
}

Source: (StackOverflow)

How to get a full, seamless rotation with Impress.js?

I'm using impress.js to create a 3D effect in which you are inside four pages, as if they were four walls in a room. To view the next page, a simple -90 degree rotation is used. The pages are already laid out with impress.js using:

//page 1
<div id="title" class="step" data-x="0" data-y="0" data-z="0">

//page 2
<div id="about" class="step" data-x="2000" data-y="0" data-z="2000" data-rotate-y="-90">

//page 3
<div id="our_work" class="step" data-x="0" data-y="0" data-z="4000" data-rotate-y="-180">

//page 4
<div id="contact" class="step" data-x="-2000" data-y="0" data-z="2000" data-rotate-y="-270">

This works, except that the transition from page four to one takes the "long way" around. As in, the rotation is displayed as a 270 degree rotation instead of -90 as the others. If I change page 1 rotation to -360 to solve this, transition from page one to page two is broken. How would I go about making a full circle of transitions?


Source: (StackOverflow)

How to use slidify with impress.js

Following https://twitter.com/ramnath_vaidya/status/274636089715740672 slidify should support impress.js. But when I use

---
title       : Test
subtitle    : 
author      : 
job         : 
framework   : impressjs  # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      # 
widgets     : []            # {mathjax, quiz, bootstrap}
mode        : selfcontained # {standalone, draft}
---

as head of my Rmd-file (impressjs as in https://raw.github.com/ramnathv/slidify/gh-pages/samples/impressjs/index.Rmd) I get an empty directory in libraries/frameworks called impressjs.

Where do I have to enable impress.js? Do I have to install impress.js prior to using it?


Source: (StackOverflow)

Impress.js : texts and images look blurry

With Impress.js, my texts and my images look blurry.

See the next screenshot where CSS is disabled but Impress.js is enabled :

enter image description here

And now see the next screenshot where Impress.js and CSS are disabled :

enter image description here

Why are they blurry ?

This is my configuration :

<div id="Model-2" class="step" data-x="117000" data-rotate="20">
    <h2>Backbone.Model</h2>
    <p>On peut préciser des valeurs par défaut</p>
    <img src="img/18.png">
</div>

Source: (StackOverflow)

How to make impress.js slideshow auto play and loop

I have a slideshow I'd like to auto play and loop continuously. I've found snippets that let me set a global slide duration and use impress.next() with a setInterval() call to move forward, but then I lose the ability to have different durations for each slide.


Source: (StackOverflow)

How to scale transition UILabel without using a lot of memory?

I'm trying to reproduce some of the 2D transitions in Impress.js's sample presentation in Objective C. Specifically the rotate, pan, and scaling - right now I'm focusing on the scaling.

I've tried scaling a UILabel to the point where it "passes the screen", as the "visualize your Big thoughts" -> "and tiny ideas" does in the sample presentation.

This is what I've tried so far:

UILabel *label = [[UILabel alloc] init];

label.text = @"Hello World!";
label.textColor = [UIColor blackColor];
label.font = [UIFont fontWithName:@"Arial" size:18.f];
[label sizeToFit];
label.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
[self.view addSubview:label];

label.contentScaleFactor *= 80;

[UIView animateWithDuration:5 animations:^{
    label.transform = CGAffineTransformScale(label.transform, 80, 80);
}];

Unfortunately this eats up about ~30-60 MB of RAM, depending on what the contentScaleFactor and initial font size is. If I don't increase the contentScaleFactor the text looks blurry. Increasing the font size also seems to eat just as much memory.

Here is what it looks in the profiler:

enter image description here

And this is just a single UILabel.

Is there any way to do this without eating up so much memory, without sacrificing quality of the text being rendered or the transitions?


Source: (StackOverflow)