Dedicated component for objects (images) focal point
This commit is contained in:
parent
04905e9e7a
commit
bf86048cb5
54
components/02_ContentShape/focalPoint/_focalPoint.styl
Normal file
54
components/02_ContentShape/focalPoint/_focalPoint.styl
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
|
||||
* A focal point is a manual choosen point in an object that will be in the center of the cropped object.
|
||||
* If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
|
||||
* The focal point is given in percentages relative to the objects size.
|
||||
|
||||
* To set the focal point either use one the the predefined classes or set them using inline CSS:
|
||||
* class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
|
||||
*
|
||||
*/
|
||||
RV-FocalPoint--upperHalf()
|
||||
+RV-Block--modifier()
|
||||
RV-CSSParameter({
|
||||
focalY: 25%
|
||||
})
|
||||
|
||||
RV-FocalPoint--lowerHalf()
|
||||
+RV-Block--modifier()
|
||||
RV-CSSParameter({
|
||||
focalY: 75%
|
||||
})
|
||||
|
||||
RV-FocalPoint--leftHalf()
|
||||
+RV-Block--modifier()
|
||||
RV-CSSParameter({
|
||||
focalX: 25%
|
||||
})
|
||||
|
||||
RV-FocalPoint--rightHalf()
|
||||
+RV-Block--modifier()
|
||||
RV-CSSParameter({
|
||||
focalX: 75%
|
||||
})
|
||||
|
||||
RV-FocalPoint(focalX=50%, focalY=50%)
|
||||
RV-CSSParameter({
|
||||
focalX: focalX,
|
||||
focalY: focalY
|
||||
})
|
||||
|
||||
height 100%
|
||||
width 100%
|
||||
object-fit cover
|
||||
object-position --focalX --focalY
|
||||
|
||||
+RV-Block('RV-FocalPoint')
|
||||
RV-FocalPoint()
|
||||
|
||||
RV-FocalPoint--upperHalf()
|
||||
RV-FocalPoint--lowerHalf()
|
||||
RV-FocalPoint--leftHalf()
|
||||
RV-FocalPoint--rightHalf()
|
||||
|
||||
|
@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "focalPoint",
|
||||
"title": "Focal Point"
|
||||
}
|
22
components/02_ContentShape/focalPoint/focalPoint.hbs
Normal file
22
components/02_ContentShape/focalPoint/focalPoint.hbs
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
<div>
|
||||
<div class="RV-AspectRatio RV-AspectRatio--4to3">
|
||||
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg'}}"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="RV-AspectRatio RV-AspectRatio--4to3">
|
||||
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
|
||||
</div>
|
||||
|
||||
<div class="RV-AspectRatio RV-AspectRatio--4to3">
|
||||
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%" src="{{ path '/images/hasi01.png'}}"/>
|
||||
</div>
|
||||
|
||||
<div class="RV-AspectRatio RV-AspectRatio--4to3">
|
||||
<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
|
||||
</div>
|
||||
|
||||
<div class="RV-AspectRatio RV-AspectRatio--1to2">
|
||||
<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user