leaverou / inspire.js Goto Github PK
View Code? Open in Web Editor NEWLean, hackable, extensible slide deck framework. Previously known as CSSS.
Home Page: https://inspirejs.org
License: MIT License
Lean, hackable, extensible slide deck framework. Previously known as CSSS.
Home Page: https://inspirejs.org
License: MIT License
When using class="delayed" on items they don't seem to show up on the projector when they do on the presenter screen.
I'm a little bit confused about how to do this.
Hi @LeaVerou,
I hope you are doing well. Sorry for this issue, but I was stumbled by the broken link to CSSS while looking through projects list on your blog. The typo is hidden in capital letters. You should replace CSSS
-> csss
. Last but not least, it will be better to replace http
-> https
also.
Best regards,
Vitalii
I've tried the demo slideshow in Chrome 22, Firefox 13.0, Safari 5.1.7 and Opera 12 on Windows 7 Pro.
With all browsers, when I try the Shift+H shortcut all I see is the bottom-right corner of the first slide, which I can click to go to that slide, but no others. The "By Lea Verou" text is also partially visible in the same place as on the first slide, and clicking it will also go to the first slide.
As seen here: http://i.imgur.com/8esYN.jpg
I want to make nested "delayed" class.
`
When "foo" is shown,
"hoge" is added "displayed" class, and "foo" is added "current" class.
`
But, class "delayed", "displayed" and "current" use "opacity" property.
"opacity" property influence child node.
Then
`
result
It does NOT work on Chorome, Opera and Safari.
"foo" is shown by "opacity 0.3".
But, I designate "color" property by "rgba".
`
result
And, I use "visibility" property in order to appear characters.
So I change "slideshow.css".
.delayed,
.delayed-children > * {
visibility: hidden;
color: rgba(0,0,0,0);
-webkit-transition:1s color;
/*-moz-transition:.7s opacity;
-o-transition:.7s opacity;
transition:.7s opacity;
*/
}
.delayed.current,
.delayed-children > .current,
.delayed.displayed.non-dismissable,
.delayed-children > .displayed.non-dismissable {
visibility: visible;
color: rgba(255,255,255,1);
}
.delayed.displayed,
.delayed-children > .displayed {
visibility: visible;
color: rgba(255,255,255,0.3);
}
It works on Safari.
When you switch a slide, part of it is displayed clipped in the top left corner of the page.
See e.g. my slides: http://l10n.mozilla.org/~marcoos/slides/2011/meetjs-krakow/index-en.html
This also happens on http://leaverou.me/csss/sample-slideshow.html#navigation but is almost unnoticable thanks to the background image and colors used in those slides. Set background to #666 instead of the image, to see it there, too.
The slideshow JS maps all arrow keys and PageUp / PageDown keys to the next/previous slide behavior. This means that if a slide is created that is too long to display in the viewport, there is no keyboard-only way to scroll it.
As much as a well-designed slide wouldn't have scroll bars, not everyone is design focused (came across this problem trying to read a slideshow in which each slide was a full page of text). And even if the slides are sized correctly for display on a projector, they might be distributed to people who just want to read the text on their smaller-screen device.
Navigate forward, about half way, go back, then go forward, the numbers get confused.
E.g. click Open in CodePen in this slide: https://designftw.mit.edu/lectures/html/#no-v-app
@LeaVerou. Thanks for this awesome repo. I'm going to use it for my next presentation :)
Just wondering, will you be interested to add sass + browsersync into CSSS to help make development quicker? I can do a pull request if you're open to it.
I am using CSSS with Ubuntu, Google Chrome.
Reloading CSSS presentation file is slow.
I tested in 2 machines, and the presentation file is local.
Is this environment specific issue, or because of heavy Javascript process?
Do you think this problem can be decreased?
This means any hooks that plugins might add are added too late, and none is executed on the first slide.
The first bad commit is this: 60e038c
In this commit, the way the plugins are loaded was changed.
The first run of the slidechange
hook happens here:
Line 442 in 4562d78
However, at this moment, none of the plugins added their code to the Hooks
object.
Even though the process of loading plugins was initiated,
Line 50 in 4562d78
this.dependencies
, which is an empty array).
This code
Line 58 in 4562d78
This means none of the plugins that rely on hooks don’t work on the first slide (not only the slide-style
plugin).
(from Lea)
Visit the main demo and notice how the cover is purple. This is because a certain scoped style on a slide makes its background purple. If you go to the next slide and then back, the slidechange
event runs, and the cover slide looks as it should (the hooks start working).
Seems to be related to the prism plugin
The internet / your CDN is going to go down exactly five minutes before my talk begins. Discuss.
https://inspirejs.org/#media-plugin
This how it looks in Chrome/Edge (Win):
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
Just came across https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API
How could Inspire.js use this? What tasks could it simplify?
I've got Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.22) Gecko/20110902 Firefox/3.6.22
and when I open index.html it freezes there:
http://img163.imageshack.us/img163/7929/progressfk.png
If I open it while firebug is open then it starts normally.
No errors are reported in the console (in either case).
Don't know why this happens.
Background: I want to add a WebGL canvas to one of my slides, and cue different phases of an animation when I use the arrow keys to proceed to the next slide. Clearly it's not desirable to use separate slides for this, but to do something similar to what delayed-children
does.
Looking over the source I've found a data-steps
attribute that I can use to assign a number of steps to a slide, but I'm not sure how its supposed to be used. I see that it must be set to an integer, and doing so creates a number of <span>
elements that progressively have displayed
added to their class, but I don't understand what these elements are supposed to do, and there doesn't seem to be anything demonstrating the feature in the example slide deck.
Furthermore, I was hoping to hook into the slidechange
event to trigger different phases of the animation, but this only fires for a complete slide change, not for progressive changes on a slide with delayed-children
or data-steps
.
I suppose I could use DOM Mutation Observers to watch these changes to these dummy elements, but this seems unwieldy as I'd need to find the child index of each to know which one was just displayed
.
At this point I thought I'd ask the community what I might be missing about data-steps
, and if there's an opportunity for a feature to fire an event as each of these steps are progressed through, which I'd be happy to submit a PR for. Thoughts?
Seems like there is now way to navigate between slides on mobile devices.
CSSS keyboard shortcuts conflict with firefox defaults and contol-shift is not an escape option. Example: control h opens the history sidebar, and control-shift h opens the history sidebar in its own window.
I think a better approach would be to delegate the choice of the modifier to the browser. Just issue some hidden navigation elements (anchors?) with the appropriate accesskey attribute. It is suitable only for keystrokes that produce printable characters but I think it is more straightforward and extensible. And hopefully every decent browser supports it.
In firefox the default modifier for web content shortcuts is alt-shit (probably command-shift on mac).
Also I had various problems with snippet editing but I am unable to reproduce them now. Either they were automagically fixed or I was doing something wrong.
One of the biggest issues of CSSS currently is the complete lack of support for mobile devices. I'm not really that experienced with mobile, so I'd welcome a pull request about this.
Requirements would be:
a) It's small (so no huge libraries please like jQuery touch or whatever)
b) It works on at least Safari iPhone and Opera Mobile on touch-enabled devices.
Thanks in advance to anyone that decides to work on this.
This commit added a regression since you are referencing prefixfree outside of the scope of the project, which assumes that users of CSSS will have prefixfree installed at the exact same location as you have locally.
Prefixfree should be should be added as a submodule to fix this.
https://github.com/pepelsbey/shower
would be nice to see a slide comparing it with csss :-)
Sometimes displays/projectors/whatnot used to give presentations are in very different sizes scaling images and content could be useful.
Example code from some projects I have used.
// when resizing
var denominator = Math.max(
body.clientWidth / window.innerWidth,
body.clientHeight / window.innerHeight
);
var transform = 'scale(' + (1 / denominator) + ')';
// scale body individual slides scale at the same time
// if background is not supposed to scale set it to html
body.style.WebkitTransform = transform;
body.style.MozTransform = transform;
body.style.msTransform = transform;
body.style.OTransform = transform;
body.style.transform = transform;
The portfolio at http://lea.verou.me/projects/ links to http://leaverou.github.com/CSSS/ which is a 404; only http://leaverou.github.com/csss/ (lowercase) works.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.