I am trying to have one image come into view behind another one. Is it possible to use z-index/opacity to accomplish this? Below is the code I'm referring to. I'm using the background-position property to move things in-out of view.
#-webkit-keyframes bannerAnimation {
0% {
background-position-x:
-240px,
-160px,
-240px,
0;
}
50% {
background-position-x:
-240px,
-45px,
-140px,
0;
}
100% {
background-position-x:
117px,
-65px,
117px,
0;
}
0%, 48% {
background-position-y:
-4000px,
0px,
480px,
0px;
}
50%, 100% {
background-position-y:
14px,
0px,
43px,
0px;
}
0% {
opacity:
0,
1,
0,
1;
}
50% {
opacity:
0,
1,
0,
1;
}
100% {
opacity:
1,
1,
1,
1;
}
}
#banner a#main .content {
background-image:
url('../images/95x27_headline_2x.png'),
url('../images/155x50_stephen_2x.png'),
url('../images/41x4_copy_2x.png'),
url('../images/320x50_bg_2x.png');
background-size:
95px 27px,
155px 50px,
41px 4px,
320px 50px;
background-position-y:
50px,
0px,
50px,
0px;
-webkit-animation: bannerAnimation 6s ease forwards;
to achieve what you are trying to do I would suggest using seperate divs for seperate images.
Then instead of animating background-position, try animating the z-index itself.
#keyframes move {
from { z-index: 0; transform: scale(1); }
to { z-index: 4; transform: scale(2.5); }
}
Check out this example on codepen.io to get you started in the right direction :)
Related
So, I'm using ChartistJSF (based on Chartist), the jsf version is kinda simples, so I'm trying to use some plugins offered in the javascript version, but I'm trying to figure out how to do this, because every chart "module" in JSF has a extend where I can put some extra configurations, but this one doesn't have. Can you guys help me?
Since 3.0, ChartistJSF supports plugins, here's an example of chartist-plugin-threshold:
xhtml
<ct:chart id="lineChart" type="line" model="#{chartDataBean.pluginsModel}"
plugins="myPlugins"
styleClass="example-plugin-threshold">
</ct:chart>
js
<script>
var myPlugins =
[
Chartist.plugins.ctThreshold({
threshold: 4
})
];
</script>
css
.example-plugin-threshold .ct-line {
stroke-dasharray: 5px;
animation: dashoffset 1s linear infinite;
}
.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-above,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-above {
stroke: #f05b4f;
}
.example-plugin-threshold.ct-chart .ct-series .ct-bar.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-line.ct-threshold-below,.example-plugin-threshold.ct-chart .ct-series .ct-point.ct-threshold-below {
stroke: #59922b;
}
.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-above {
fill: #f05b4f;
}
.example-plugin-threshold.ct-chart .ct-series .ct-area.ct-threshold-below {
fill: #59922b;
}
#-webkit-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#-moz-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#-ms-keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
#keyframes dashoffset {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: -20px
}
}
Result:
I want the color of the bars in the menu icon to change on mouse hover. So far I'm only able to change the background color. Any suggestions?
Fiddle: https://jsfiddle.net/Walter69/nwczmdah/5/
.container {
display: inline-block;
cursor: pointer;
}
.container:hover {
color: #fff!important;
background: #FF0000;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #000;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}
You need to add the color when hover the container:
.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
background: #FFF;
}
https://jsfiddle.net/nwczmdah/6/
When first loading the slick-carousel while using flex-boxes, the width of the slick-slide and the slick-track are set to 0 which hides the first slide until it triggers the next slide. If there is only one slide, it's hidden and will never show unless the window is manually resized.
First wrap your carousel with a container:
.myContainer {
position: fixed;
top: 0;
left: 0;
height: 100%;
width:100%;
}
<div class="myContainer">
<div class="myCarousel" (click)="navigate()"></div>
</div>
Next, be sure is to have min-height & min-width set to 0 for the .slick-slider.
CSS:
note the changes from the default slick-carousel styles are commented
// new definition
.slick-slider {
min-height: 1px;
min-width: 1px;
}
.slick-slide {
float: left;
[dir="rtl"] {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
// set height
width: 100% !important; // helps to fix the loading issue when using flex-box
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading {
visibility: hidden;
}
}
.slick-initialized {
display: block;
// set height and width
height: 100%; // helps to fix the loading issue when using flex-box - stretches slide vertically
width: 100% !important; // helps to fix the loading issue when using flex-box - shows slide upon load
}
.slick-loading {
visibility: hidden;
}
.slick-vertical {
display: block;
height: auto;
border: 1px solid transparent;
}
Finally, make sure you have defined the responsive setting when initializing your slick-slider:
// initialize carousel
private initializeCarouselSettings(){
this.carousel.slick({
accessibility: false,
autoplay: false,
arrows: false,
slidesToShow: 1,
pauseOnHover: false,
pauseOnFocus: false,
draggable: false,
swipe: false,
touchMove: false,
centerMode: true,
fade: this.isTransitionTypeFade(),
autoplaySpeed: this.getSlideInterval(),
speed: this.getSpeedValue(),
responsive: [ // fixes the loading issue when using flex-box
{
breakpoint: 1024,
settings: {
mobileFirst: false,
infinite: true,
speed: this.getSpeedValue(),
slidesToShow: 1,
centerMode: true,
variableWidth: false,
focusOnSelect: false
}
}
]
});
}
I've been trying to re-create the Google Ripple effect for buttons. You can see it: here
It works in Chrome, but only in chrome. And I can't seem to figur out why.
I am making the ripple like this: On click, create an svg inside the button. Which is placed at the right position using mouse coordinates. Then it is animated trough css keyframe animations, which animate the circle radius (r="*").
css:
body .custom-container .btn-custom .ripple-svg circle {
opacity: 0;
transform: traslateZ(0);
-webkit-animation: flowAnimation 1s;
-moz-animation: flowAnimation 1s;
-o-animation: flowAnimation 1s;
animation: flowAnimation 1s;
}
#-webkit-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#-moz-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#-o-keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
#keyframes flowAnimation {
0% {
r: 5;
opacity: 0;
}
10% {
opacity: 0.3;
}
50% {
opacity: 0.2;
}
90% {
r: 300;
opacity: 0;
}
100% {
r: 5;
opacity: 0;
}
}
JS:
// Mouse coordinates in button
var MousePosX
var MousePosY
var offset = $("#flow-button").offset();
// Set coordinates on mouse move
$('#flow-button').on( "mousemove", function( event ) {
MousePosX = ( event.pageX - offset.left);
MousePosY = ( event.pageY - offset.top + 15);
});
// Ripple effect
$('#flow-button').on("click", function(){
// Append svg circle on each click
$('#flow-button').append('<svg class="ripple-svg" height="100%" width="100%"><circle r="10" fill="black" /></svg>');
// Append is following mouse coordinates
$('.ripple-svg circle').css({
cx: MousePosX,
cy: MousePosY
});
// On multiple clicks delete all but the last one
if ($('.ripple-svg').length > 2) {
$('.ripple-svg:not(:last-child)').remove();
}
});
Anyone any idea?
In SVG 1.1 radius (r) is an attribute and not a CSS property. In SVG 2 it is proposed that most attributes should become CSS properties.
SMIL can animate both attributes and CSS properties but CSS animations can only animate CSS properties.
Chrome has implemented this part of the SVG 2 specification (to see how feasible it is). No other UA has done so yet but in the future any of them might do so.
I have created USA states map using jqvmap
. See
jqvmap.com
I want to write state names in middle of map like image below.
I have tried using pseudo elements but its not working.
This is my code.
jQuery(document).ready(function () {
jQuery('#vmap').vectorMap({
map: 'usa_en',
enableZoom: false,
showTooltip: true,
backgroundColor: '#D9D9D9',
color: '#009F45',
borderColor: '#ffffff',
borderOpacity: 0.25,
borderWidth: 2,
hoverColor: '#999999',
selectedColor: '#0077aa',
selectedRegion: 'MO',
onRegionClick: function (element, code, region)
{
var message = 'You clicked "'
+ region
+ '" which has the code: '
+ code.toUpperCase();
alert(message);
}
});
});
/*!
* jQVMap Version 1.0
*
* http://jqvmap.com
*
* Copyright 2012, Peter Schmalfeldt <manifestinteractive#gmail.com>
* Licensed under the MIT license.
*
* Fork Me # https://github.com/manifestinteractive/jqvmap
*/
.jqvmap-label
{
position: absolute;
display: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #000000;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jqvmap-zoomin
{
top: 10px;
}
.jqvmap-zoomout
{
top: 30px;
}
.jqvmap-region
{
cursor: pointer;
}
.jqvmap-ajax_response
{
width: 100%;
height: 500px;
}
/*Colors of state*/
path#jqvmap1_nj{
fill:#7AC37A;
}
path#jqvmap1_tn{
fill:#7AC37A;
}
path#jqvmap1_in{
fill:#7AC37A;
}
path#jqvmap1_co{
fill:#7AC37A;
}
path#jqvmap1_ca{
fill:#026E38;
}
path#jqvmap1_ca:after{
content:'ca';
position: absolute;
top: 0;
color:#fff;
}
path#jqvmap1_ak{
fill:#6E6F73;
}
path#jqvmap1_tx{
fill:#6E6F73;
}
path#jqvmap1_ar{
fill:#6E6F73;
}
path#jqvmap1_la{
fill:#6E6F73;
}
path#jqvmap1_al{
fill:#6E6F73;
}
path#jqvmap1_nh{
fill:#6E6F73;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="https://jqvmap.com/js/vmap/jquery.vmap.usa.js"></script>
<div id="vmap" style="width: 600px; height: 400px;"></div>
First, there is no built-in parameter in jqvmap to add the states code.
Finding a good position for this labels is not a trivial task. For example, Florida's shape is not convex, Michigan has two parts.
Some questions related on stackexchange network:
- Algorithm for finding irrregular polygon centroid (label point)
- How to split compound polygons into convex polygons?
- Partitioning a polygon into convex parts
So, I tried to place them with a dummy algorithm, which places the state code at a kind of centroid of state shapes.
Then, you can move them as you want, and use the positions you have set.
Here is the main function which compute the centroid of a SVG path:
//svgPathParser => browserified version of
// https://github.com/hughsk/svg-path-parser
var parsedPath= svgPathParser(path);
// pathes in jqvmap are, for the most of them, in the form of [ start Point, [ curves ] ]
// if you want better results it is possible to refine that.
var origin= { x: parsedPath[0].x, y: parsedPath[0].y };
var pathPartCentroids= [];
var totalLength= 0;
for( var i=1; i< parsedPath.length - 1; i++){
var pathPart= parsedPath[i];
if(pathPart.code !="c")
break;
//centroidOfPathPart returns the centroid of a Bezier curve.
var pathPartCentroid= centroidOfPathPart([ [0,0], [ pathPart.x1, pathPart.y1 ], [ pathPart.x2, pathPart.y2 ], [ pathPart.x, pathPart.y ] ]);
pathPartCentroid.x += origin.x;
pathPartCentroid.y += origin.y;
pathPartCentroid={ centroid: pathPartCentroid, distance: norm( pathPartCentroid, origin) }
pathPartCentroids.push(pathPartCentroid);
totalLength+= pathPartCentroid.distance;
origin.x+= pathPart.x;
origin.y+= pathPart.y;
}
var centroid= {x:0,y:0};
//segments are weighted by their length
pathPartCentroids.forEach(function( pathPart ){
centroid.x += pathPart.centroid.x * pathPart.distance / totalLength;
centroid.y += pathPart.centroid.y * pathPart.distance / totalLength;
});
You can edit position with this pen.
Then use that another one to add state codes in a map.