Help
RSS
API
Feed
Maltego
Contact
Domain > inspirejs.org
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2022-04-18
34.74.57.176
(
ClassC
)
2022-04-29
52.5.183.223
(
ClassC
)
2022-09-07
3.128.161.103
(
ClassC
)
2026-02-01
3.33.186.135
(
ClassC
)
Port 443
HTTP/1.1 200 OKAccept-Ranges: bytesAccess-Control-Allow-Origin: *Age: 0Cache-Control: public,max-age0,must-revalidateCache-Status: Netlify Edge; fwdmissContent-Length: 9255Content-Type: text/html; charsetUTF-8Date: Sun, 01 Feb 2026 22:08:43 GMTEtag: dccc5a8567eaf5faa29d507c629e3238-sslServer: NetlifyStrict-Transport-Security: max-age31536000X-Nf-Request-Id: 01KGDM0HQ6CB8QW40CKM06A1W8 !DOCTYPE html>html>head> meta charsetutf-8 /> meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1 /> title>Inspire.js: A brief introduction/title> link hrefinspire.css relstylesheet /> link hreftheme.css relstylesheet /> link hreftalk.css relstylesheet />/head>body classlanguage-markup data-prism-pluginsnormalize-whitespace>header idintro classslide> h1> Inspire.js /h1> h2> Lean, hackable, extensible slide deck framework /h2> p classattribution>By a hrefhttp://lea.verou.me>Lea Verou/a> and a hrefhttps://github.com/LeaVerou/inspire.js/graphs/contributors>contributors/a>/p>/header>section> header classslide> h1>Introduction/h1> /header> article classslide titleInspire.js: Introduction> h1>Main idea/h1> ul classdelayed-children> li>An HTML file contains the whole presentation/li> li>Themes as CSS files/li> li>Plugins for extra functionality, autoloaded when used/li> li>Nice JavaScript API for really custom things/li> /ul> /article> article classslide> h1>History/h1> ul> li>Originally created in 2010 for my first talk, at a hrefhttp://front-trends.com>Front Trends 2010/a>/li> li>By popular demand, it was released shortly after, named CSSS/li> li>Huge refactor and renaming to Inspire.js in Sep 2018/li> /ul> /article> article classslide> h1>Syntax/h1> ul> li>Slides are defined by adding the code>slide/code> class to any elements./li> li>code><header classslide>/code> is a header slide (relevant for the a href#overview>Overview/a>)/li> /ul> /article> article classslide idnavigation> h1>Keyboard Navigation/h1> ul> li>kbd>→/kbd> or kbd>↓/kbd> to advance to the next slide or incrementally displayed item/li> li>kbd>←/kbd> or kbd>↑/kbd> to go to the previous slide or incrementally displayed item/li> li>kbd>Ctrl/kbd>kbd>→/kbd> or kbd>Ctrl/kbd>kbd>↓/kbd> to jump to the next slide/li> li>kbd>Ctrl/kbd>kbd>←/kbd> or kbd>Ctrl/kbd>kbd>↑/kbd> to jump to the previous slide/li> li>Home to go to the first slide, End to go to the last/li> li>kbd>Ctrl/kbd>kbd>G/kbd> to jump to an arbitrary slide (by slide number or identifier)/li> li classdelayed> Note that if a slide contains an code><iframe>/code>, when the content in the iframe is focused, Inspire.js shortcuts will not work. There is no way around that, you need to click on something from the actual slide to get focus out of the iframe before you use any Inspire.js keyboard shortcuts. Some plugins (e.g. live demo) add on-screen Next buttons for this reason. /li> /ul> /article>/section>section> header classslide> h1>Features/h1> /header> article classslide iddata-insert> h1>Repeated slides/h1> ul> li>Use attribute code>data-insert#id/code> on an empty slide to re-insert it later in the slideshow/li> li>Notice how this slide will also be re-inserted after the next one!/li> /ul> /article> article classslide> h1>IDs and titles/h1> ul> li>IDs are dynamically assigned by JavaScript, but you can also use your own/li> li>Slide titles (used in the browser tab when the slide is active, and in the a href#overview>Overview/a>) via the code>title/code> or code>data-title/code> attributes or headings in the slide./li> li>If only an id or only a title is provided, the other is extracted from it./li> /ul> /article> article classslide data-insert#data-insert>/article> article classslide> h1>Incremental display/h1> ul classdelayed-children> li>Incremental display of slide contents (just add code>classdelayed/code>)/li> li>Use selector code>.delayed.future/code> to change the style of undisplayed items/li> li>Use selector code>.delayed.displayed/code> to change the style of displayed items/li> li>Use selector code>.delayed.current/code> to change the style of current items/li> li>Use code>classdelayed-children/code> to apply the code>delayed/code> class to all of an element’s children/li> li> Nested delayed items strong classdelayed>are possible/strong>! /li> /ul> /article>/section>section> header classslide> h1>Plugins/h1> /header> article classslide idoverview> h1>Overview/h1> ul> li>Loaded automatically, use code><code classno-overview>/code> to prevent this./li> li>Press kbd>Ctrl/kbd>+kbd>H/kbd> (or kbd>Shift/kbd>+kbd>H/kbd>) to trigger, kbd>Esc/kbd> to close./li> li classdelayed>Cool, huh? You can press kbd>Ctrl/kbd>kbd>Shift/kbd>kbd>H/kbd> to see all slides/li> /ul> /article> article classslide> h1>Syntax highlighting with PrismJS/h1> ul> li>Autoloads core & languages used/li> li>Load plugins by listing their ids in a code>data-prism-plugins/code> attribute, on any element (first one will be used)./li> li>Automatically figures out dependencies & aliases/li> li>CSS is up to you!/li> /ul> pre classlanguage-jsx>code>var start new Date().getTime();setInterval(function() { React.render( <ExampleApplication elapsed{new Date().getTime() - start} />, document.getElementById(container) );}, 50);/code>/pre> /article> article classslide data-videohttps://mavo.io/demos/eshop/video.mp4 style--url: https://mavo.io/demos/eshop idmedia-plugin> div> h1>Annotated videos/h1> ul> li>code>data-video/code> for URL/li> li>code>classannotation/code> for annotations/li> li>code>data-time/code> and code>data-pause/code> on annotations/li> /ul> /div> span classannotation top-pointer styletop: 44%; left: 59.5%; --pointer-left: 4em; data-time3000 to 3500 data-pause>Click to dismiss & resume/span> span classannotation top-pointer styletop: 26%; left: 67.1% data-time5200 to 5700 data-pause2000>Auto-resume after 2sec/span> /article> article classdemo slide idlivedemo> textarea classlanguage-html>p>Live demo!/p>/textarea> textarea classlanguage-css> p { font-size: 250%; color: #f06; } /textarea> /article> article classisolated demo slide idisolated-livedemo> textarea classlanguage-html>p>Live demo in iframe!/p>/textarea> textarea classlanguage-css> p { font-size: 250%; color: #f06; } /textarea> /article> article classslide> h1>Timer/h1> ul> li>Define the talk duration with the attribute code>data-duration/code> on the code>body/code>./li> li>Timer in the form of a progress bar on the top/li> li>Style the timer and the end state with the selectors code>#timer/code> and code>#timer.end/code> respectively./li> /ul> /article> article classslide data-resolution1024 768> h1>Resolution/h1> ul> li>Design for a specific resolution, and have slides scale up and down based on the viewport./li> li>Define with the attribute code>data-resolution/code> on the code><body>/code> for all slides, a grouping element, or individual slides (like this one!)./li> li>Try resizing the viewport, note how the slide size adapts!/li> /ul> /article> article classslide> h1>Presenter View & Notes plugins/h1> ul> li>code><details classnotes>/code> for collapsible slide notes./li> li>Any slide notes load the presenter view plugin as well./li> li>Split current window into presenter and audience view with kbd>Ctrl/kbd>kbd>P/kbd> (or kbd>Shift/kbd>kbd>P/kbd>)/li> li> The presenter view includes: ul> li>Timer/li> li>Upcoming slide/li> li>Notes that are expanded by default (collapsed notes are visible in audience view too)./li> /ul> /li> li>Both-way synchronization of slide status between the two windows./li> /ul> details classnotes> Sample notes here. This works quite nicely with the Markdown plugin, just use code>data-markdown-elementsdetails.notes/code> and all notes will support Markdown! /details> /article> article classslide idslidestyle> style data-slide> .slide { background: rebeccapurple; } /style> h1>Slide-specific CSS/h1> p>You can use the code>data-slide/code> attribute on code><style>/code> elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else./p> p>For example, run code classlanguage-js>$(#slidestyle style).sheet.cssRules0.selectorText/code> in the console to see how the original selector gets changed./p> /article>/section>footer classslide titleThe End> h1>Thank you!/h1> p>Get it or contribute at a hrefhttps://github.com/LeaVerou/inspire.js>github.com/LeaVerou/inspire.js/a>/p>/footer>script srcinspire.mjs typemodule>/script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]