I've produced Adobe edge animate animation. I am trying to use it in a Bootstrap 3 website. However, I can't find a way to embed it that respects the row and column formatting of bootstrap when the animation is published as "Responsive Scaling" The animation jus blows the boundaries of the columns every time.
Has anyone had success combining edge animate graphics in a bootstrap design?
I was having this exact same problem, try adding this to the javascript parameters in the header (after height & width etc):
bScaleToParent:"true"
Related
I've been trying to recreate the random snow/star effect that's on this website , but I've had no luck..
I'm assuming this needs to be done in CSS, is there anyone who can help me write the code?
Thanks in advance!
Samoht
you have nothing show, but here is a short description
To create this effect, we’ll need three different “snow” graphics. These are transparent images of varying degrees of size and focus. We’ll overlay these three graphics on top of one another for a bit of depth.
Let’s style the background with these images. I’ve uploaded them to Imgur, feel free to use them.
Next, let’s create the keyframe. This is necessary to animate the background images as shown in the example down. If you’re read any of my posts before, you’re probably familiar with CSS Keyframes by now.
Our “snow” keyframe is slowly moving each background image independently of one another at different paces to create the awesome effect of snow falling.
You can change the speed or direction by modifying the background positions in the keyframe at 100%.
Demo w src: jsfiddle.net/orLgtgao/
I'm trying to set up a Bootstrap 3 carousel to show 3 images per active slide, I want the next and previous images to be truncated but the centre image full width, similar to this example: https://thescene.com/.
I've played around with this for quite a while but can't seem to get the truncated effect? My initial idea is to have the containing div full width to show all 3 images in full with an overflow:hidden property to get the effect, but the carousel itself needs to be 1280px wide. Codeply is here: http://www.codeply.com/go/6eBfBskTsV
Why not grab one online? This component seems has a partial nearby image effect...
http://www.jssor.com/index.html
The bootstrap carousel is just a simple implementation rather than a universal solution, which means it can be cumbersome to tweak to achieve some complicated presentation. I guess unless you are just practising your skills, you won't like to make one by yourself.
We have a customer who has created an animated graphic (using AI & After Effects).
The graphic is essentially 3 overlapping donuts (can't post right now for "obvious reasons")
Each donut isn't perfectly circular and is distorted in some unique way
Each donut has a different linear color gradient on a different chord
Each donut rotates, scales & pulses at a slightly different speed in the animation.
Their graphic was built using Illustrator (each donut being 1 layer), and then animated in After Effects. The result of the overlapping donuts is a nice color multiplication effect where the various sections of each donut overlaps.
I'm currently trying to port this to the web and running into major problems with regards the color blending & multiplication stuff.
Somethings I've tried.
Export the AI file as an SVG and animate using RaphaelJS
Export the paths directly from AI and render them with RaphaelJS
Take the exported SVG and hack it to use FeImage & FeBlend filters
All of the above do not render as I would expect and from a little googling SVG color blending and the SVG spec in general is not fully implemented across the majority of browsers.
I've also tried export the individual layers as PNGs and then using CSS done:
background: url('PNGs/L1.png') center center,
url('PNGs/L2.png') center center,
url('PNGs/L3.png') center center;
background-repeat: no-repeat;
background-blend-mode: multiply;
This kinda gets me in the right direction but: it seems to be completely broken in IE, and I can't get it to work where each PNG is the BG image on 1 of 3 different divs (which I need to do in order to animate the div individually)
Am I just barking up the wrong tree with this problem or is this something that there's a magic js graphics library out there that will fix all my woes ?
The CSS blend modes are only available in the latest browsers, so if the color effects are essential that isn't really an option. The only color multiplication effect that has anywhere decent browser support is SVG filters (<feBlend>).
One difficulty of using filters, however, is that there currently isn't decent browser support for combining multiple elements from the same file in a filter. None of the browsers support the SVG1.1 enable-background option for blending one element with the elements behind it (it will be replaced by the isolation feature in the new CSS Blending spec). The <feImage> filter element could be used to import a fragment of your SVG into the filter for another element, but that use isn't supported in Firefox (which only allows it to be used for complete image files).
So, your strategy would be:
Create separate files (SVG or PNG) for each of your three colored donuts.
Create an empty container element that you will pass to the filter. Make sure you set the filter region to the correct dimensions for the output graphic.
In the filter, use three <feImage> elements to load your component graphics. Set the x, y, width, and height parameters to the initial overlapping positions of the three graphics.
Combine the <feImage> results using two <feBlend> operations
Animate the parameters of <feImage> using JavaScript or SMIL with JavaScript backup for IE.
Limitations:
Filters operate on pixel graphics, you can't do any transformations other than setting the position and size of the imported images. If you need other animations, you'd need to do them in the source image files.
You're loading four separate files. Might want to look into data URIs to cut down the total load time.
More on SVG Filters
If you're okay with only supporting the latest browsers (with others seeing the shapes but not the color multiply effect), you should be able to do this with CSS Blending on any of
SVG elements, with animated transformations
Multiple HTML images or elements with CSS backgrounds (animating the CSS transform property, possibly with fallback to animating absolute position properties)
A single HTML element with multiple CSS background images, animated using the background-position property (CSS or JavaScript). The animation is trickier here, since the positions of all the layers are controlled through a single CSS property. It also wouldn't be hardware-accelerated like a transformation, which can be implemented using independent layers combined by the video card.
However, note that there are two different blend mode properties:
background-blend-mode controls how layered backgrounds on an element blend into each other. It can be a list of values for each image in your background. It has no effect on blending between separate elements (HTML or SVG).
mix-blend-mode controls how a given element is blended into the content behind, subject to the limitations of the isolation property (which isolates all child content from blending with the rest of the web page) or other properties which create a stacking context.
More on CSS Blending
caniuse.com browser support for CSS Blending
I'm using Bootstrap 2.3.0 on the following website: www.agrium.com/AgTracker
The problem I am having is that when the browser window is resized or when a user is using a tablet/phone, the two logos at the very top of the page are not displaying as I would like.
Below I am showing this behaviour using Chrome on my desktop.
Situation #1: full screen display, logos are spread out and full size. I'm happy with this.
Situation #2: screen size is decreased, but logos are still full size. I would like for either the logos to stay on the same line and for the logos to scale (shrink).
Situation #3: this would likely be solved by whatever fixes situation #2, but I just wanted to show that if I shrink the browser width further, the Agrium logo has scaled (yay!) but the AgTracker logo has not (boooo).
Any help with updating the CSS or way I am using Bootstrap that allows for the logos to both scale and remain on the same line would be appreciated.
There are a couple of ways to solve this problem:
At first, you should recognize that the first two images are actually not two but just a single image. Using this technique, you can make a single png or jpg file with all these three images in combined into a single image file. I would not recommend this, so I would like to propose a much more robust solution using CSS. Please look at my second point.
You can use CSS3's in built feature known as CSS3 Media Queries.
This technology allows you to create responsive websites and be able
to dictate how your content appears on a variety of devices like
mobile, tabs or desktops.
I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom).
I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for.
So am using 3 div's to have the background image display, the only problem is depending on the length of the content, the bottom background image does not align nicely and make the box appear seamless, due to the repeated middle image being cut off prior to the point where the border merges.
I have used a brush in photoshop to create the jagged container. I have had a nose around about this but can not find a solution to fit.
The solution is to set a specific increase of height increment for your content area. This can be done in a couple of ways:
If your content is mostly text, you can set your line-height and/or the height of any other used elements to be the desired increment (or a multiple thereof) and hope for the best.
If this will not work, the only other way would be to use JavaScript.
Here are a couple discussions of this very challenge, including some thoughts on using line height and some starts at workable JavaScript code:
http://doctype.com/any-way-increase-hieght-div-specific-increment
http://www.dynamicdrive.com/forums/showthread.php?t=64034