parallax-section

{% comment %} Adding Parallax Section in Shopify with Overlay Text and Background Image {% encomment %}
{% assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

<section class="parallax-container parallax-{{ section.id }} index-section no-fouc lazyload">
  <div class="parallax-section desktop-12 tablet-6 mobile-3">
    <div class="parallax-text">
      {% unless section.settings.heading == blank %}
        <h2>{{ section.settings.heading | escape }}</h2>
      {% endunless %}
      {%- unless section.settings.subheading == blank -%}
        <p>{{ section.settings.subheading }}</p>
      {%- endunless -%}
      {% unless section.settings.button_link == blank %}
        <div class="clear"></div>
        <a class="button" href="{{ section.settings.button_link }}">
          {{ section.settings.button_text }}
          
        </a>
      {% endunless %}
    </div>

    {% if section.settings.image == blank %}
      <div class="onboard plax-placehold">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {% endif %}
  </div>
</section>

<div class="clear"></div>

<style>
  .parallax-{{ section.id }}.index-section {
    padding: 0;
  }

  .parallax-{{ section.id }} .parallax-section {
    background-image: url('{{ section.settings.image | img_url: '2400x' }}');
  }

  .parallax-{{ section.id }} .parallax-text {
    font-size: {{ section.settings.heading_font_size }}px;
    font-weight: {{ section.settings.heading_font_weight }};
  }
  .parallax-{{ section.id }} .parallax-text h2 {
    color: {{ section.settings.heading_color }};
  }
</style>

{% schema %}
  {
    "name": "Image with text overlay",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "header",
        "content": "Overlay Heading"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Image with text overlay"
      },
      {
        "type": "range",
        "id": "heading_font_size",
        "min": 12,
        "max": 36,
        "step": 1,
        "unit": "px",
        "label": "Heading size",
        "default": 26
      },
      {
        "type": "select",
        "id": "heading_font_weight",
        "label": "Heading weight",
        "options": [
          {
            "value": "400",
            "label": "Normal"
          },
          {
            "value": "300",
            "label": "Light"
          },
          {
            "value": "700",
            "label": "Bold"
          }
        ]
      },
      {
        "type": "color",
        "id": "heading_color",
        "label": "Heading",
        "default": "#000"
      },
      {
        "type": "header",
        "content": "Overlay Text"
      },
      {
        "type": "textarea",
        "id": "subheading",
        "label": "Text",
        "default": "Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story."
      },
      {
        "type": "range",
        "id": "subheading_font_size",
        "min": 12,
        "max": 36,
        "step": 1,
        "unit": "px",
        "label": "Text size",
        "default": 16
      },
      {
        "type": "select",
        "id": "subheading_font_weight",
        "label": "Text weight",
        "options": [
          {
            "value": "400",
            "label": "Normal"
          },
          {
            "value": "300",
            "label": "Light"
          },
          {
            "value": "700",
            "label": "Bold"
          }
        ]
      },
      {
        "type": "color",
        "id": "subheading_color",
        "label": "Text color",
        "default": "#000"
      },
      {
        "type": "header",
        "content": "Overlay Button"
      },
      {
       "id": "button_text",
       "type": "text",
       "label": "Button text",
  	   "default": "Add a button",
  	   "info": "Visible only if a link is chosen"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "color",
        "id": "button_text_color",
        "label": "Button text",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "button_color",
        "label": "Button background",
        "default": "#000"
      }
	],
  "presets": [
      {
        "name": "Image with text overlay",
        "category": "Image"
      }
    ]
}
{% endschema %}

{% comment %} Following is the output generated by the code in customization section: http://prntscr.com/phave0 {% encomment %}