I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.
Here is my current barba.js code if it is of any use:
barba.init({
sync: true,
views: [
{ namespace: 'about' },
{ namespace: 'projects' },
{ namespace: 'stories' }
],
transitions: [{
name: 'opacity-transition',
sync: true,
async enter(data) {
// Entrance Transition settings
return gsap.from(data.next.container, {
left: '20%',
filter: 'brightness(0.4)',
duration: 0.9,
ease: 'power1.inOut',
});
},
async leave(data) {
// Exiting Transition settings
return gsap.to(data.current.container, {
left: '-100%',
duration: 0.9,
filter: 'brightness(0.6)',
ease: 'power1.inOut',
});
},
}]
});
The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js
Related
I'm using cytoscape to dynamically create a network visualisation and I'm having trouble to setup the layout correctly.
Occasionally, a collection of nodes is created and attached to a parent node.
Then I call the following function to layout the new nodes and center the graph on that parent:
static DoLayout(node) {
setTimeout(() => {
cy.layout({
name: 'cose',
fit: false,
nodeRepulsion: function (node) { return 99999; },
componentSpacing: 100,
padding: 100,
randomize: false,
animate: 'end',
animationEasing: 'ease-in-out',
animationDuration: 350,
stop: () => {
setTimeout(() => {
cy.zoom(.8)
cy.center(node);
}, 100);
}
})
.run();
}, 50);
}
And here's the issue:
Is there a possibility to have these three actions layout, center and zoom happen at the same time? Or smoothly?
Edit: (fit: true,)
Setting fit to true, as suggested by canbax, solves the 'flickering' issue shown in the gif. However it still doesn't produce a smooth transition (animation?) when zooming and centering. Plus, I don't want the graph to be completely zoomed-out then zoomed-in and centered.
I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()
I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});
Fixed it by updating to 6.11 from 6.10. :)
I need to fix the problem with body element and the css overflow attribute discussed in this post:
When a fancybox 2 is activated, a scrollbar flashes on the parent page causing the content to shift left and then back
Using the helper option helpers: {overlay: {locked: false}} fixes my problem, but I need a solution to set this option for all Fancybox calls, this way I do not need to spend this setting on each call.
I tried with different forms, but doesn't works:
$.fancybox.open([{
helpers: {
overlay: {
locked: false
}
}
}]);
$.extend($.fn.fancybox.helpers, {
overlay: {
locked: false
}
});
$.fn.fancybox.defaults.overlay.locked = false;
I do not want to change the css component, because currently use the same via Bower.
You could setup an object with this setting that you use in all of your fancyBox calls:
var fancyBoxDefaults =
{
helpers: {
overlay: {
locked: false
}
}
};
$(".fancybox1").fancybox(fancyBoxDefaults);
$(".fancybox2").fancybox(fancyBoxDefaults);
If you need to set settings for any specific fancyBox, you could extend the object:
$(".fancybox3").fancybox($.extend(fancyBoxDefaults,{
maxWidth: 800,
maxHeight: 600
}));
Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.